根據(jù)調(diào)試工具看Vue源碼之computed（一）

aisuhua 發(fā)布于2019-08-26 13:34 / 1344人閱讀

摘要：官方定義類型詳細計算屬性將被混入到實例中。所有和的上下文自動地綁定為實例計算屬性的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算。注意，如果某個依賴比如非響應(yīng)式屬性在該實例范疇之外，則計算屬性是不會被更新的。

官方定義

類型：{ [key: string]: Function | { get: Function, set: Function } }

詳細：計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例...

計算屬性的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算。注意，如果某個依賴 (比如非響應(yīng)式屬性) 在該實例范疇之外，則計算屬性是不會被更新的。

上面這幾段話其實可以歸納為以下幾點：

computed是計算屬性，會被混入到Vue實例中

computed的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算

如何初始化computed？

同以往一樣，先新建一個Vue項目，同時加入以下代碼：

export default {
  name: "test",
  data () {
    return {
      app: 666
    }
  },
  created () {
    console.log("app proxy -->", this.appProxy)
  },
  computed () {
    appProxy () {
      debugger
      return this.app
    }
  }
}

F12打開調(diào)試界面，刷新后斷點停在了debugger的位置，同時可以看到右邊的調(diào)用棧：

appProxy

get

evaluate

computedGetter

created

...

瞥到computedGetter之后，點進去，可以看到：

function createComputedGetter (key) {
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate();
      }
      if (Dep.target) {
        watcher.depend();
      }
      return watcher.value
    }
  }
}

看到這里不禁一臉懵逼

云服務(wù)器 GPU云服務(wù)器看動畫學(xué)算法之:hashtable vue源碼 vue webrtc 源碼源碼中文說明之

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109065.html

相關(guān)文章

根據(jù)調(diào)試工具看Vue源碼之computed（二）

摘要：回顧上回提到，計算屬性的緩存與這個類的屬性有關(guān)，那么這次我們接著來看下，屬性到底取決于什么情況來變化，從而對進行緩存。回顧上回提到，computed————計算屬性的緩存與Watcher這個類的dirty屬性有關(guān)，那么這次我們接著來看下，dirty屬性到底取決于什么情況來變化，從而對computed進行緩存。依賴收集切入正題之前，我們先來看一個問題：如果一個computed的結(jié)...

U2FsdGVkX1x 2019-08-23 15:58 評論0 收藏0
根據(jù)調(diào)試工具看Vue源碼之生命周期（一）

摘要：由于工作中經(jīng)常使用調(diào)試工具來定位問題，覺著這東西真的挺好用。突然有一天受到啟發(fā)，想著我學(xué)習(xí)源碼是否也可以通過調(diào)試工具呢因此，誕生了這篇文章來記錄我的一些學(xué)習(xí)成果，后續(xù)應(yīng)該會寫成一個系列。由于工作中經(jīng)常使用chrome調(diào)試工具來定位問題，覺著這東西真的挺好用。突然有一天受到啟發(fā)，想著：我學(xué)習(xí)源碼是否也可以通過調(diào)試工具呢？因此，誕生了這篇文章來記錄我的一些學(xué)習(xí)成果，后續(xù)應(yīng)該會寫成一個...

My_Oh_My 2019-08-23 15:07 評論0 收藏0
根據(jù)調(diào)試工具看Vue源碼之組件通信（一）

摘要：根據(jù)調(diào)試工具看源碼之組件通信一根據(jù)調(diào)試工具看源碼之組件通信一在平時的業(yè)務(wù)開發(fā)中，相信在座的各位沒少用過組件通信?？赐瓯疚目梢詭椭懔私饨M件的通信方式及原理，從而進一步加深對的理解，遠離工程師的行列。根據(jù)調(diào)試工具看Vue源碼之組件通信（一）## 根據(jù)調(diào)試工具看Vue源碼之組件通信（一）在平時的業(yè)務(wù)開發(fā)中，相信在座的各位沒少用過組件通信。然而，對于一些新手/業(yè)務(wù)熟手來說，不懂技術(shù)原理往...

付倫 2019-08-23 15:30 評論0 收藏0
根據(jù)調(diào)試工具看Vue源碼之watch

摘要：實例將會在實例化時調(diào)用，遍歷對象的每一個屬性。我們期待的是斷點停下后，調(diào)用棧中出現(xiàn)相關(guān)的函數(shù)，提供我們分析原理的依據(jù)。抱著上面的意圖以及期待，我們新建一個項目，同時寫入以下代碼刷新頁面后右邊的調(diào)用棧顯示如下官方定義類型：{ [key: string]: string | Function | Object | Array } 詳細：一個對象，鍵是需要觀察的表達式，值是對...

monw3c 2019-08-23 16:20 評論0 收藏0
根據(jù)調(diào)試工具看Vue源碼之虛擬dom（二）

摘要：前言上回我們提到，在子組件存在的情況下，父組件在執(zhí)行完鉤子函數(shù)之后生成子組件的實例，子組件執(zhí)行鉤子函數(shù)，同時也檢查是否也有子組件，有則重復(fù)父組件的步驟，否則子組件的元素渲染深入了解在上一篇文章中其實我們提到一個函數(shù) 前言上回我們提到，在子組件存在的情況下，父組件在執(zhí)行完created鉤子函數(shù)之后生成子組件的實例，子組件執(zhí)行created鉤子函數(shù)，同時也檢查是否也有子組件，有則重復(fù)父組...

zzir 2019-08-26 13:45 評論0 收藏0