Vue初學者可能不知道的坑

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.手動操控自定義組件

• 場景一 :一些自定義組件，須要去獲取組件對象進行一些其餘的Dom操做

• • 解決方法 :使用ref屬性暴露組件獲取句柄

<template>
    <el-progress type="circle" :percentage="O" ref="progress"></el-progress></template>
  <script>
    this.$refs.progress //組件對象實例， 能夠手動調用組件的內置方法和屬性
    this.$refs.progress.$el //組件 對象的最外層dom元素
  </script>

5.深度做用選擇器

• 場景一 : scoped的樣式，但願影響到子組件的默認樣式

在樣式中設置完scoped在瀏覽器解析爲以下圖這樣，a是個div，a div裏面包含一個組件裏面解析完了div的樣式名字爲b，想在父組件影響到子組件的默認樣式。解決方法:

<style scoped>
    .a >>> .b { /* ... */ }
  </style>
    //有些像Sass之類的預處理器沒法正確解析>>>。這種狀況下你能夠使用/deep/操做符取而代之- - - -這是一個>>>的別名，一樣能夠正常工做。  <style scoped lang=「scss」>
    .a /deep/ .b { /* ... */ }
  </style>

6.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官網可查）:
  • 總體替換數組/對象

7.Vue Filters過濾器的使用

• 場景一 :常見的數據文本的格式化

<!– 在雙花括號中 –>
 <div>{{ message | DateFormat }}</div>    //展現正確時間
 <!– 在'v-bind'中 –>
 <div v-bind:id='rawId | formatId'></div>
 //Demo:一個日期過濾器返回yyyy- MM-ddhh:mm:ss的樣式
 //引入一個提早寫好日期格式化的js  import dayjs from ‘dayjs’;
 export default {
    data() {
       return {
               //時間毫秒
               message:18324798324789
           }
   },
   filters: {
         //傳入進行日期格式化
     DateFormat(value) {
       return dayjs(value).format(「YYYY-MM-DD HH:mm:ss")
         }
   }
 }

8.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 // 默認觸發一次
   }
 }</cod  e>

參考連接：https://www.vue-js.com/topic/5be446a7fffaa30f33091cf1