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

Vue中的計算屬性computed傳參方式

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

vue計算屬性computed傳參

計算屬性在依賴值不變的情況下，結果是會緩存數(shù)據(jù)的；

methods中定義的方法調(diào)用則不會緩存。

所以計算屬性相對函數(shù)來說性能更好一些。

計算屬性的傳參方式

1. 如果使用類似函數(shù)的調(diào)用傳參方式，會報如下錯誤：

如下是錯誤操作：

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 本質是一個惰性求值的觀察者。

computed 內(nèi)部實現(xiàn)了一個惰性的 watcher,也就是 computed watcher 不會立刻求值,它同時持有一個 dep 實例。

其內(nèi)部通過 this.dirty 屬性標記計算屬性是否需要重新求值。

當 computed 的依賴狀態(tài)發(fā)生改變時,就會通知這個惰性的 watcher,

computed watcher 通過 this.dep.subs.length 判斷有沒有訂閱者, 并設置 this.dirty = true

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

總結

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

相關文章

最新評論