computed無法得到this的屬性或方法

場景

在vue中使用es6語法的箭頭函數(shù)無法正常的使用this下面的方法

原因

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

• 修改前：

computed: {
? ? isShowDialog: () => {
? ? ? return this.$store.getters.isShowDialog;
? ? }
? },

• 修改后：

computed: {
? ? isShowDialog: function() {
? ? ? return this.$store.getters.isShowDialog;
? ? }
? },

vue計算屬性computed的應用

computed 計算屬性

Vue本身支持模板中使用復雜表達式表現(xiàn)業(yè)務數(shù)據(jù)，但是這會使得模板內容過于雜亂，如果確有需求，可以通過computed 計算屬性實現(xiàn)，computed 可以對其他data做復雜合成處理。

語法：

new Vue({
? el:xx,
? data:xx,
? computed:{
? ? // 屬性名稱:function(){} ? ? ? ?普通函數(shù)賦值
? ? // 屬性名稱(){} ? ? ? ? ? ? ? ? 簡易成員函數(shù)賦值
? ? 屬性名稱(){
? ? ? // 業(yè)務表達式實現(xiàn)，可以通過this操作data成員
? ? ? return ?返回結果
? ? }
? }
})

注意：計算屬性（普通函數(shù)賦值）或（簡易成員函數(shù)賦值） 都可以，不要使用箭頭函數(shù)。

使用：

形式上，如何應用data成員，就如何應用計算屬性

{{ computed計算屬性名稱 }} ? ? <!-- 模板中-->
this.XXX?? ??? ??? ??? ? ? ?<!-- Vue實例內部-->

computed 應用場景

如果頁面需要訪問一個數(shù)據(jù)，這個數(shù)據(jù)比較復雜，是需要通過其他data經過復雜邏輯制作出來的，就可以使用“計算屬性”。

computed 計算屬性特點

• 計算屬性關聯(lián)的data如果發(fā)生變化，會重新編譯執(zhí)行，獲得并使用對應新結果，即響應式(入口)。
• 計算屬性的返回信息有變化，使用的地方也會重新編譯執(zhí)行，存在出口響應式。
• 計算屬性內部可以使用this關鍵字訪問data成員，與Vue對象等效。
• 每個計算屬性都需要通過return關鍵字返回處理結果。

computed 計算屬性與methods方法的區(qū)別

• computed計算屬性本身有緩存，在關聯(lián)的data沒有變化的情況下，后續(xù)會使用緩存結果，節(jié)省資源，methods方法沒有緩存，每次訪問方法體都需要加載執(zhí)行，耗費資源。
• methods應用邏輯較復雜，例如內部可以嵌入ajax，或互相調用，而computed比較簡單，只是操作data的。

computed 計算屬性案例

通過computed計算屬性獲取并應用篩選的品牌數(shù)據(jù)

步驟：

1.創(chuàng)建計算屬性

在Vue實例內部創(chuàng)建計算屬性(與el、data、methods并列位置處)，名稱為 brandFilters

// 聲明計算屬性
computed:{
? // 創(chuàng)建一個名稱為brandsFilters的計算屬性
? brandsFilters () {
? ? // 可以正常使用this關鍵字
? ? return this.brandList.filter(item=>{
? ? ? return item.name.includes(this.keywords)
? ? })
? }
},

2.應用計算屬性

<table v-if="brandsFilters.length>0">
? <tr>
? ? <td></td>
? ? <td>序號</td>
? ? <td>名稱</td>
? ? <td>創(chuàng)建時間</td>
? ? <td>操作</td>
? </tr>
? <tr v-for="(item,k) in brandsFilters" :key="item.id">
? ? <td><input type="checkbox"></td>
? ? <td>{{ item.id }}</td>
? ? <td>{{ item.name }}</td>
? ? <td>{{ item.ctime }}</td>
? ? <td><button @click="del(k)">刪除</button></td>
? </tr>
</table>

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論