vue.js開發技巧

1. setTimeout/ setInterval

• 場景一 ：this指向改變沒法用this訪問vue實例

  mounted(){
    setTimeout( function () {
    //setInterval同理
    console.log(this); //此時this指向Window對象
    }，1000) ;
    }

• 解決方法 :使用箭頭函數或者緩存this

  //箭頭函數訪問this實例由於箭頭函數自己沒有綁定this
      setTimeout(() => {
    	console. log(this);},  500) ;
    	//使用變量訪問this實例let self=this;
      },1000);
      setTimeout (function () {
    	console. log(self);//使用self變量訪問this實例
      }, 1000) ;

setInterval路由跳轉繼續運行並無銷燬

• 場景一 :好比一些彈幕，走馬燈文字，這類須要定時調用的，路由跳轉以後，由於組件已經銷燬了，可是setlnterval尚未銷燬，還在繼續後臺調用，控制檯會不斷報錯，若是運算量大的話，沒法及時清除，會致使嚴重的頁面卡頓。

• 解決方法 :在組件生命週期beforeDestroy中止setInterval

  created() {
    	   this.intervalid = setInterval(() => {
    		  this.layerError = "";
    		  this.Timer = null;
    	  }, 100000);
       }
      beforeDestroy( ){
    	//我一般是把setInterval( )定時器賦值給this實例，而後就能夠像下面這麼暫停。
    	clearInterval(this.intervalid);
      }

2. Vue路由攔截瀏覽器後退實現草稿保存相似需求

• 場景一 :爲了防止用戶忽然離開，沒有保存已輸入的信息。

• 解決方法 :

  //在路由組件中:mounted(){}，
      beforeRouteLeave (to, from, next) {
    	  if(用戶已經輸入信息){
    		//出現彈窗提醒保存草稿，或者自動後臺爲其保存
    	  }else{
    		next(true);//用戶離開
    	  }
      }

3. 自定義組件添加click等事件不生效

• 場景一 :一些自定義組件，須要額外添加一些事件來實現一些特定需求

  <template>
    	<el-progress type="circle" :percentage=「0" @click=「stopProgress」></elprogress>
    </template>
    <script>
    	export default {
    		methods:{
    			stopProgress() { 
    				console.log('中止')
    			}
    		}
    	}
    </script>

• 解決方法:使用.native修飾符

  <template>
    	<el-progress type="circle" :percentage=「0" @click.native=「stopProgress」></el-progress>
    </template>
    <script>
    	export default {
    		methods:{
    			stopProgress() { 
    				console.log('中止')
    		}
    	}
    }
    </script>

4. Vue數組/對象更新視圖不更新

• 場景一 :不少時候咱們習慣於這樣操做數組和對象

  data() { 
    	return {
    		arr: [1,2,3],
    		obj:{
    		  a: 1,
    		  b: 2 
    		}
    	}; 
      },
  
      // 數組更新視圖不更新
      this.arr[0] = 'OBKoro1';
      this.arr.length = 1;
      console.log(arr);// ['OBKoro1']; 
      // 數據更新，對象視圖不更新     
      this.obj.c = 'OBKoro1';
      delete this.obj.a;
      console.log(obj);  // {b:2,c:'OBKoro1'}

• 解決方法 ：

  • this. $set(你要改變的數組/對象，你要改變的位置/key,你要改爲什麼value)

  • 數組原生方法觸發視圖更新（ vue官網可查）:

  • 總體替換數組/對象

5. Vue深度watch與watch當即觸發回調

• 場景一 :在watch裏面監測對象裏面對應的值是監測不到的，能夠用以下方法。

  • 選項: deep 在選項參數中指定deep:true,能夠監聽對象中子屬性的變化。

  • 選項: immediate 在選項參數中指定immediate:true,將當即以表達式的當前值觸發回調，也就是默認觸發一次。

    watch: {
    	obj: {
    		handler(val, oldVal) {
    		  console.log('屬性變化觸發這個回調',val, oldVal); 
    		},
    		deep: true // 監測這個對象中每個屬性的變化
    	},
    	step: { // 屬性 //watch
    	   handler(val, oldVal) {
    		console.log("默認觸發一次", val, oldVal); 
    	   },
    	   immediate: true // 默認觸發一次
    	}
      }