VUE でエラーが発生しやすい点

今回は、VUE で間違いやすいポイント、VUE を使用する際に間違いやすい注意事項とは何ですか、以下は実践的なケースです、見てみましょう。

vue は今やダークホース、github 星の数が1位になりました！ Vue はフロントエンド開発でますます使用されていますが、その利点については紹介しません。この記事は、誰もが落とし穴を避けるために、Vue を使用するプロセスとコミュニティの友人から寄せられた質問をまとめたものです。気に入ったら「いいね！」や「フォロー」をしていただけると幸いです。

1. ルーティング変更ページのデータが更新されません

この状況は、作成されたライフサイクルで依存ルートのparamsパラメーターが取得および書き込まれるために発生します。同じルートが2回、または複数回ロードされるため、ページを終了して別の記事ページに入ると監視に到達しません。作成されたコンポーネントを実行します。ライフサイクルとは、記事データがまだ最初に入力されたときのものであることを意味します。

解決策: ルートが変更されるかどうかを監視してください。

りー

2. 非同期コールバック関数でこれを使用すると、vue インスタンス オブジェクトを指すことはできません

watch: {
// 方法1
'$route'
 (to, 
from
) { 
//监听路由是否变化
if
(
this
.$route.
params
.articleId){
// 判断条件1 判断传递值的变化
//获取文章数据
  }
  }
//方法2
'$route'
(to, 
from
) {
if
 (to.path == 
"/page"
) { 
/// 判断条件2 监听路由名 监听你从什么路由跳转过来的
this
.message = 
this
.$route.query.msg  
  }
  }  
 }

解決策: 変数の代入とアロー関数。 (参考: var と let の違い: http://www.jb51.net/article/134704.htm)

//setTimeout/setInterval ajax Promise等等
 data(){
return
{
  ...
  }
 },
 methods (){
   setTimeout(
function
 () { 
//其它几种情况相同
   console.log(
this
);
//此时this指向并不是vue实例 导致操作的一些ma'f
  },
1000
);
 }

3.setInterval ルート ジャンプは実行を継続し、時間内に破棄されません

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

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

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

4.vue のスクロール動作の使用法。ルートを入力するには、ブラウザーの下部や先頭などまでスクロールする必要があります。

フロントエンド ルーティングを使用して、新しいルートに切り替えるときに、ページをリロードするのと同じように、ページを一番上までスクロールするか、元のスクロール位置を維持する必要があります。 vue-router を使用することもできますが、それよりも優れているのは、ルートを切り替えるときにページがスクロールする方法をカスタマイズできることです。 注: この機能は、history.pushState をサポートするブラウザでのみ使用できます。

ルーティング設定は次のとおりです: (詳細については、ここをクリックしてください: https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html)

 //组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
 beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。
  clearInterval(
this
.intervalId);
 },

5. ブラウザーのニーズをインターセプトし、下書きの保存などの一連の操作を実行するための vue ルーティングを実装します。 シナリオ：ユーザーが誤って閉じるボタン等をクリックし、入力した情報（キー情報）が保存されないことを防止するため。 使用法: rreee beforeEach や beforeRouteUpdate などのライフサイクル関数もあります。 詳細についてはここをクリックしてください: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

6.v-once は要素とコンポーネントを 1 回だけレンダリングし、レンダリングのパフォーマンスを最適化して更新します

v-once コマンドは皆さんあまり使わないと思いますが、個人的にはかなり実用的だと思います。 要素とコンポーネントは 1 回だけレンダリングされます。その後の再レンダリングでは、要素/コンポーネントとそのすべての子は静的コンテンツとして扱われ、スキップされます。これを使用して、更新パフォーマンスを最適化できます。 ここでは例は示しませんが、ここをクリックしてください: v-once (https://cn.vuejs.org/v2/api/#v-once)

7. Vue のローカル プロキシ構成は、開発環境に限定されるクロスドメインの問題を解決します

このローカル プロキシは、開発環境でクロスドメインの問題を解決するために使用されます。プロキシ vue でプロキシを設定するのは非常に簡単です。この記事の事例を読んだ後の方法など、とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。 推奨読書:

vueは現在選択されている項目のステータスを変更します

vue better-scrollスクロールプラグインの使用方法の詳細な説明

以上がVUE でエラーが発生しやすい点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。