computed無(wú)法得到this的屬性或方法

場(chǎng)景

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

原因

計(jì)算屬性computed不應(yīng)該使用箭頭函數(shù)來(lái)定義計(jì)算屬性 因?yàn)榧^函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向Vue

• 修改前：

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

• 修改后：

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

vue計(jì)算屬性computed的應(yīng)用

computed 計(jì)算屬性

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

語(yǔ)法：

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

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

使用：

形式上，如何應(yīng)用data成員，就如何應(yīng)用計(jì)算屬性

{{ computed計(jì)算屬性名稱 }} ? ? <!-- 模板中-->
this.XXX?? ??? ??? ??? ? ? ?<!-- Vue實(shí)例內(nèi)部-->

computed 應(yīng)用場(chǎng)景

如果頁(yè)面需要訪問(wèn)一個(gè)數(shù)據(jù)，這個(gè)數(shù)據(jù)比較復(fù)雜，是需要通過(guò)其他data經(jīng)過(guò)復(fù)雜邏輯制作出來(lái)的，就可以使用“計(jì)算屬性”。

computed 計(jì)算屬性特點(diǎn)

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

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

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

computed 計(jì)算屬性案例

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

步驟：

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

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

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

2.應(yīng)用計(jì)算屬性

<table v-if="brandsFilters.length>0">
? <tr>
? ? <td></td>
? ? <td>序號(hào)</td>
? ? <td>名稱</td>
? ? <td>創(chuàng)建時(shí)間</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>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論