vue中 computed 下使用箭頭函數會報錯

computed: {
     myPhone: () => {
         let num3 = this.mobile.slice(-4);
         let num1 = this.mobile.slice(0,-8);
         let str = `${num1}****${num3}`;
         return str;
     }
 }
           

這種情況下會報一個這樣的錯，其實并不是slice方法的原因，而是我們在computed中使用了箭頭函數

我們把箭頭函數換掉，就不會再報錯了。

首先我們來說一下computed的作用

和普通屬性一樣是在模闆中綁定計算屬性，當data中對應資料發生改變時，計算屬性值會随之改變。

計算屬性compute是基于他們的依賴（如果是執行個體範疇之外的依賴，比如非響應式的notreactive是不會觸發屬性更新的）進行緩存(計算屬性的結果會被緩存)，隻有相關依賴會發生改變時才會重新求值，未改變隻會傳回隻之前的結果，不在執行函數

是以

計算屬性computed不應該使用箭頭函數來定義計算屬性 因為箭頭函數綁定了父級作用域的上下文，是以 this 将不會按照期望指向Vue