Vue の実践におけるいくつかの問題のまとめ

Vue を実践していると必ずいくつかの問題に遭遇しますが、この記事では、皆さんのお役に立てればと思い、これらの問題を列挙し、解決策を共有します。

この記事では、個人が遭遇した問題を次のように記録しています:

1. ルーティング変更ページのデータが更新されない問題

2. setTimeout/setInterval これは変更を指しており、これを使用して VUe インスタンスにアクセスできません

3. setInterval ルーティング ジャンプは継続します 実行は破棄されません

4. vue のスクロール動作 (ブラウザーのロールバック メモリ位置) の使用法

5. vue ルーティングはブラウザーのロールバックをインターセプトして、下書き保存の同様の要件を実装します

6. v-once のみ要素をレンダリングし、コンポーネントを一度だけ最適化 レンダリング パフォーマンスを更新

7. vue フレームワーク スタイル ガイドの推奨事項

ルート変更ページのデータが更新されない問題

シナリオ: params に依存する記事の詳細データなどルートのパラメータ（作成されたライフサイクルにajaxが書き込まれています）、ルートの遅延読み込みにより、ページを終了して別の記事ページに入ると、作成されたコンポーネントのライフサイクルが実行されず、記事データがデータのままになります。前の記事の。

params参数获取的(ajax写在created生命周期里面)，因为路由懒加载的关系，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是上一个文章的数据。

解决方法：watch监听路由是否变化

 watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.articleId){//是否有文章id
      //获取文章数据
    }
  }
}

setTimeout/setInterval this指向改变，无法用this访问VUe实例

场景：

  mounted(){ 
        setTimeout(function () { //setInterval同理 
          console.log(this);//此时this指向Window对象
        },1000);
    }

解决方法：使用箭头函数或者

    //箭头函数访问this实例 因为箭头函数本身没有绑定this
     setTimeout(() => { 
       console.log(this);
    }, 500);
    //使用变量访问this实例
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self变量访问this实例
        },1000);

setInterval路由跳转继续运行并没有销毁

场景：

比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。

解决办法：在组件生命周期beforeDestroy停止setInterval

组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。

beforeDestroy(){
     //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么暂停。
    clearInterval(this.intervalid);
},

vue 滚动行为(浏览器回退记忆位置)用法

这个我当时做的时候以为很难，后来做好了才发现就是一个设置而已（前提是要开启路由的History 模式），下面做一个简单的分享。

路由设置

1. 要使用这一功能，首先需要开启vue-router的 history模式

如果之前一直使用的是hash 模式(默认模式)，项目已经开发了一段时间，然后转history模式很可能会遇到：这些问题

1. 滚动行为具体设置如下：

   const router = new VueRouter({
    mode: 'history',
   scrollBehavior (to, from, savedPosition) {
   //savedPosition

   if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
     return savedPosition
   } else {
     return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
    }
   }，

   routes: [...]
   })

vue滚动行为文档，可以进到这里看看更详细的信息。

vue路由拦截浏览器后退实现草稿保存类似需求

场景：

为了防止用户突然离开，没有保存已输入的信息。

用法：

//在路由组件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(用户已经输入信息){
    //出现弹窗提醒保存草稿，或者自动后台为其保存
    
  }else{
    next(true);//用户离开
  }

类似的还有beforeEach、beforeRouteUpdate解決策: ルートが変更されるかどうかを監視します

Vue.component('terms-of-service', {
  template: '\
    <p v-once>\
      <h1>Terms of Service</h1>\
      ...很多静态内容...\
    </p>\
  '
})

setTimeout/setIntervalは変更を指します。これを使用してVUeインスタンスにアクセスすることはできません

シナリオ:

rrreee

解決策: アロー関数または

rrreee

を使用しますsetInterval ルート ジャンプ 実行の継続は破棄されませんシナリオ:

たとえば、ルート ジャンプ後、コンポーネントは破棄されていますが、setInterval は破棄されていないため、一部の弾幕と回転テキストを定期的に呼び出す必要があります。計算量が多い場合、プラットフォームはエラーを継続的に報告し、時間内にクリアできなくなり、深刻なページ フリーズが発生します。

解決策: Destroy の前にコンポーネントのライフサイクルで setInterval を停止します

コンポーネントが破棄される前に実行されるフック関数は、他のライフサイクル フック関数と同じです。

rrreee

vueのスクロール動作（ブラウザのロールバックメモリ位置）の使い方

これをやるときは、とても難しいと思いましたが、後でそれが単なる設定であることがわかりました（前提条件はルーティングの履歴モードをオンにすることです）。 、次の操作を行います 簡単な共有。

ルーティング設定

この機能を使用するには、まず vue-router の履歴モードを有効にする必要があります

以前に hash モード (デフォルト モード) を使用していた場合は、プロジェクトが開発されている 一定の時間が経過した後、履歴モードに切り替えると、次のような問題が発生する可能性があります。

スクロール動作の具体的な設定は次のとおりです。 const router = new VueRouter({

mode: 'history',

scrollBehavior (to, from, SavedPosition ) {//savedPositionrrreee

routes: [...]

})

vue スクロール動作ドキュメント、ここにアクセスして詳細を確認できます詳細な情報。

vue ルーティングはブラウザバックをインターセプトし、下書き保存のための同様の要件を実装します

シナリオ:

🎜 ユーザーが突然離れることを防ぐために、入力された情報は保存されません。 🎜🎜使用法: 🎜rrreee🎜 同様に、beforeEach と beforeRouteUpdate もあり、これらもグローバル フックとコンポーネント フックに分かれています。ルーティングのドキュメントを参照してください。 🎜🎜v-once は要素とコンポーネントを 1 回だけレンダリングし、レンダリング パフォーマンスを最適化および更新します🎜🎜 v-once の API は 6 つと非常に多いと思いますが、多くの友人はこの API に気づいていないかもしれません。 🎜🎜ドキュメントの紹介: 🎜🎜🎜🎜🎜🎜🎜 私の意見では、この API は主にこれらの 1 回限りのレンダリングに使用され、これらのレンダリングの値を変更する操作はありません。双方向バインディングのパフォーマンスを最適化できます。 🎜🎜ドキュメントの推奨事項: オーバーヘッドの低い静的コンポーネントには v-once を使用してください🎜🎜Vue での HTML のレンダリングは高速ですが、コンポーネントに大量の静的コンテンツが含まれている場合は、v-once を使用してレンダリング結果をキャッシュすることを検討できます。こんな感じ: 🎜rrreee🎜vue スタイルガイド推奨事項: 🎜🎜 これを書いていて思ったのですが、vue フレームワークにもスタイルガイド推奨事項があり、下図のように wave も学習できます。 🎜🎜🎜🎜🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜🎜🎜Vue.js2.0 変更概要の共有🎜🎜🎜🎜🎜Vue.js 2.5 の新機能の共有🎜🎜🎜🎜Vue.js コンポーネントの詳細テンプレートの説明🎜🎜 🎜🎜🎜🎜🎜🎜

以上がVue の実践におけるいくつかの問題のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。