1. 程式人生 > >vue中 computed 下使用箭頭函式會報錯

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