欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中的計(jì)算屬性computed傳參方式

 更新時(shí)間：2023年11月16日 10:13:44   作者：lenjstlp  
這篇文章主要介紹了Vue中的計(jì)算屬性computed傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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. 正確使用方式(寫成閉包的形式)：

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 判斷有沒有訂閱者, 并設(shè)置 this.dirty = true

  • 有的話,會(huì)重新計(jì)算,然后對(duì)比新舊值,如果變化了,會(huì)重新渲染。 (Vue 想確保不僅僅是計(jì)算屬性依賴的值發(fā)生變化，而是當(dāng)計(jì)算屬性最終計(jì)算的值發(fā)生變化時(shí)才會(huì)觸發(fā)渲染 watcher 重新渲染，本質(zhì)上是一種優(yōu)化。)
  • 沒有的話,僅僅把 this.dirty = true。 (當(dāng)計(jì)算屬性依賴于其他數(shù)據(jù)時(shí)，屬性并不會(huì)立即重新計(jì)算，只有之后 其他地方需要讀取屬性 的時(shí)候，它才會(huì)真正計(jì)算，即具備 lazy（懶計(jì)算）特性。比如這個(gè)屬性并沒有被其他地方用到，就不會(huì)重新去計(jì)算它)
  • 所以惰性watcher/計(jì)算屬性在創(chuàng)建時(shí)是不會(huì)去求值的，是在使用的時(shí)候去求值的。

總結(jié)

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

相關(guān)文章

最新評(píng)論