根據調試工具看Vue源碼之computed（一）

aisuhua 發布于2019-08-26 13:34 / 1293人閱讀

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

官方定義

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

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

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

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

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

computed的結果會被緩存，除非依賴的響應式屬性變化才會重新計算

如何初始化computed？

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

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

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

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
    }
  }
}

看到這里不禁一臉懵逼

云服務器 GPU云服務器看動畫學算法之:hashtable vue源碼 vue webrtc 源碼源碼中文說明之

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109065.html

根據調試工具看Vue源碼之computed（二）

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

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

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

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

摘要：根據調試工具看源碼之組件通信一根據調試工具看源碼之組件通信一在平時的業務開發中，相信在座的各位沒少用過組件通信。看完本文可以幫助你了解組件的通信方式及原理，從而進一步加深對的理解，遠離工程師的行列。根據調試工具看Vue源碼之組件通信（一）## 根據調試工具看Vue源碼之組件通信（一）在平時的業務開發中，相信在座的各位沒少用過組件通信。然而，對于一些新手/業務熟手來說，不懂技術原理往...

付倫 2019-08-23 15:30 評論0 收藏0
根據調試工具看Vue源碼之watch

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

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

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

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