VUE使用中に踏んだピット

vueは今では黒馬と呼ばれ、github star数が1位!フロントエンド開発はvueの使用が増えているので、その利点は紹介しません.本編は私がvueの使用過程といくつかのコミュニティの友达に私の質問の中でしたいくつかの総括で、みんなが穴を踏むことを助けて、本文がみんなを助けることができることを望みます!
本編で紹介する質問は以下の通りです.

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

settimeout/setInterval(非同期リターン関数のthis指向を指す)this指向は変更され、thisでVUeインスタンスにアクセスできません.

setIntervalルーティングジャンプは引き続き実行され、直ちに破棄されなかった.

vueスクロール動作用法、ルーティングに入るにはブラウザの下部、ヘッダなどにスクロールする必要があります.

vueルーティングブロッキングブラウザのニーズを実現し、一連の操作スケッチ保存などを行う.

v-onceは要素とコンポーネントを一度だけレンダリングし、レンダリング性能の更新を最適化します.

vueローカルエージェント構成は、開発環境に限られたドメイン間問題を解決する.

ローカル開発では、サーバの導入に問題はありません.404でしょう.

1.ルーティング変更ページデータが更新されない問題
このような状況は、ルーティングに依存するparamsパラメータがcreatedライフサイクルに書き込まれているため、同じルーティングの2回または複数回のロードの関係がリスニングに達していないため、ページを終了して別の文章ページに入るとcreatedコンポーネントのライフサイクルが実行されず、文章データが初めて入力されたデータであることを導くためです.
解決策:watchリスニングルーティングが変化するかどうか

    ：watch        
 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     
    }
  }  
}

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

//setTimeout/setInterval ajax Promise  
data(){  
  return{
    ...
  }
},
methods (){
     setTimeout(function () {   //        
      console.log(this);//  this     vue          ma'f
    },1000);
}

3.setIntervalルーティングのジャンプが継続して実行され、直ちに破棄されなかった
例えば、いくつかの弾幕、走馬灯の文字、このようなタイミングで呼び出す必要があるのは、ルーティングがジャンプした後、コンポーネントが破壊されたためですが、setIntervalはまだ破壊されていません.バックグラウンドで呼び出しを続けています.コンソールは絶えずエラーを報告します.演算量が大きいと、すぐにクリアできません.深刻なページカートンを招きます.
解決策:コンポーネントライフサイクルbeforeDestroyでsetIntervalを停止する

//            ，                。
beforeDestroy(){ 
     //     setInterval()      this  ，            。
    clearInterval(this.intervalId);
},

4.vueスクロール動作用法、ルーティングに入るにはブラウザの下部頭部などにスクロールする必要がある
フロントエンドルーティングを使用して、新しいルーティングに切り替えると、ページを再ロードするように、ページを上部にスクロールしたり、元のスクロール位置を維持したりします.vue-routerは、ルーティング切り替え時にページがどのようにスクロールするかをカスタマイズすることができます.
注意:この機能はhistoryのみをサポートします.PushStateのブラウザで使用できます.

const router = new VueRouter({
   mode: 'history',
 scrollBehavior (to, from, savedPosition) {
      if (savedPosition) { //  savedPosition  ，               
       return savedPosition
     } else { 
       return { x: 0, y: 0 }//savedPosition      x  y      
      }
     }，
   routes: [...]
 }) 

5.vueルーティングブロッキングブラウザのニーズを実現し、一連の操作下書き保存などを行う
シーン:ユーザーが誤ってボタンを閉じるなどして、入力した情報(キー情報)が保存されないようにします.使用法://ルーティングコンポーネント:...beforeRouteLeave (to, from, next) {

  if(        ){
     //          ，          
    
  }else{ 
    next(true);//    
  }
    
}

また、beforeEach、beforeRouteUpdateといったライフサイクル関数もあります
6.v-onceは要素とコンポーネントを一度だけレンダリングし、レンダリング性能の更新を最適化する
v-onceという指令はみんなが使うのが少ないと信じていますが、個人的には実用的な感じがします!
要素とコンポーネントを一度だけレンダリングします.その後の再レンダリングでは、要素/コンポーネントとそのすべてのサブノードが静的コンテンツとして扱われ、スキップされます.これにより、更新パフォーマンスを最適化できます.
7.vueローカルエージェント構成はドメイン間の問題を解決し、開発環境に限られる.
このローカルエージェントは開発環境でのドメイン間問題を解決するために使用され、ドメイン間では一般的な問題と言えます.proxyはvueでエージェントを構成するのは簡単です.

//        http://192.168.1.xxx:8888/backEnd/paper    
//    config.js  proxyTable  
proxyTable: { 
            '/backEnd':{
                target:'http://192.168.3.200:8888', //                 
                                                    //  prot             
                changeOrigin:true,    
            }
},
//   request  
   axios.get('/backEnd/page')  //         /backEnd      target  
    .then((res) => { 
       console.log(res) //              
      this.newsList = res.data
    }, (err) => { 
       console.log(err)
    }) 

8.ローカル開発で問題のない導入サーバ404などの問題
フロントエンドルーティングのため、単一ページアプリケーションはnginxやapache、tomcatなどのwebエージェントサーバに置くべきであり、indexに直接アクセスしないでください.htmlは、自分のサーバのプロジェクトパスに基づいてreactまたはvueのルーティングアドレスを変更します.
注意が必要です
1:vue-routerのhistoryモード
2:サービスnginx構成
転載先http://mp.weixin.qq.com/s/TVH0y7fxAVmDo3D0B4RYLQ