Vue中的計(jì)算屬性computed傳參方式
vue計(jì)算屬性computed傳參
計(jì)算屬性在依賴值不變的情況下，結(jié)果是會(huì)緩存數(shù)據(jù)的；
methods中定義的方法調(diào)用則不會(huì)緩存。
所以計(jì)算屬性相對(duì)函數(shù)來(lái)說(shuō)性能更好一些。
計(jì)算屬性的傳參方式
1. 如果使用類似函數(shù)的調(diào)用傳參方式，會(huì)報(bào)如下錯(cuò)誤：
如下是錯(cuò)誤操作：
data() {
return {
data: [{id: 1},{id: 2}]
}
}
computed: {
testComputed(val) {
return this.data[val]
}
}
created() {
this.testComputed(0)
}2. 正確使用方式(寫(xiě)成閉包的形式)：
data() {
return {
data: [{id: 1},{id: 2}]
}
}
computed: {
testComputed() {
return val => {
return this.data[val]
}
},
}
created() {
console.log(this.testComputed(0)) // { "id": 1 }
}vue computed原理
computed 本質(zhì)是一個(gè)惰性求值的觀察者。
computed 內(nèi)部實(shí)現(xiàn)了一個(gè)惰性的 watcher,也就是 computed watcher 不會(huì)立刻求值,它同時(shí)持有一個(gè) dep 實(shí)例。
其內(nèi)部通過(guò) this.dirty 屬性標(biāo)記計(jì)算屬性是否需要重新求值。
當(dāng) computed 的依賴狀態(tài)發(fā)生改變時(shí),就會(huì)通知這個(gè)惰性的 watcher,
computed watcher 通過(guò) this.dep.subs.length 判斷有沒(méi)有訂閱者, 并設(shè)置 this.dirty = true
- 有的話,會(huì)重新計(jì)算,然后對(duì)比新舊值,如果變化了,會(huì)重新渲染。 (Vue 想確保不僅僅是計(jì)算屬性依賴的值發(fā)生變化，而是當(dāng)計(jì)算屬性最終計(jì)算的值發(fā)生變化時(shí)才會(huì)觸發(fā)渲染 watcher 重新渲染，本質(zhì)上是一種優(yōu)化。)
- 沒(méi)有的話,僅僅把 this.dirty = true。 (當(dāng)計(jì)算屬性依賴于其他數(shù)據(jù)時(shí)，屬性并不會(huì)立即重新計(jì)算，只有之后 其他地方需要讀取屬性 的時(shí)候，它才會(huì)真正計(jì)算，即具備 lazy（懶計(jì)算）特性。比如這個(gè)屬性并沒(méi)有被其他地方用到，就不會(huì)重新去計(jì)算它)
- 所以惰性watcher/計(jì)算屬性在創(chuàng)建時(shí)是不會(huì)去求值的，是在使用的時(shí)候去求值的。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue通過(guò)style或者class改變樣式的實(shí)例代碼
這篇文章主要介紹了vue通過(guò)style或者class改變樣式的實(shí)例代碼，在文中給大家提到了vue的一些樣式(class/style)綁定,需要的朋友可以參考下2018-10-10
Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問(wèn)題解析
在近期開(kāi)發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來(lái)對(duì)頁(yè)面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問(wèn)題,無(wú)法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01
Vuex中Store的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了Vuex中Store的簡(jiǎn)單實(shí)現(xiàn),為了在 Vue 組件中訪問(wèn) this.$store property,你需要為 Vue 實(shí)例提供創(chuàng)建好的 store,Vuex 提供了一個(gè)從根組件向所有子組件,以 store 選項(xiàng)的方式 注入 該 store 的機(jī)制,需要的朋友可以參考下2023-11-11
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue響應(yīng)式原理模擬實(shí)現(xiàn)原理探究
這篇文章主要介紹了Vue響應(yīng)式原理，響應(yīng)式就是當(dāng)對(duì)象本身（對(duì)象的增刪值）或者對(duì)象屬性（重新賦值）發(fā)生了改變的時(shí)候，就會(huì)運(yùn)行一些函數(shù)，最常見(jiàn)的示render函數(shù)2022-09-09
在Vue項(xiàng)目中取消ESLint代碼檢測(cè)的步驟講解
今天小編就為大家分享一篇關(guān)于在Vue項(xiàng)目中取消ESLint代碼檢測(cè)的步驟講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法
vue3項(xiàng)目,新增彈框連續(xù)點(diǎn)擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-08-08
Vue2?中的數(shù)據(jù)劫持簡(jiǎn)寫(xiě)示例
這篇文章主要為大家介紹了Vue2?中的數(shù)據(jù)劫持簡(jiǎn)寫(xiě)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue webpack build資源相對(duì)路徑的問(wèn)題及解決方法
這篇文章主要介紹了vue webpack build資源相對(duì)路徑的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
vue中使用localstorage來(lái)存儲(chǔ)頁(yè)面信息
這篇文章主要介紹了vue中使用localstorage來(lái)存儲(chǔ)頁(yè)面信息,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11