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

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

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

官方定義

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

詳細(xì)：計(jì)算屬性將被混入到 Vue 實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例...

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

上面這幾段話其實(shí)可以歸納為以下幾點(diǎn)：

computed是計(jì)算屬性，會(huì)被混入到Vue實(shí)例中

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

如何初始化computed？

同以往一樣，先新建一個(gè)Vue項(xiàng)目，同時(shí)加入以下代碼：

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

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

appProxy

get

evaluate

computedGetter

created

...

瞥到computedGetter之后，點(diǎn)進(jìn)去，可以看到：

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云服務(wù)器云服務(wù)器看動(dòng)畫學(xué)算法之:hashtable vue源碼 vue webrtc 源碼源碼中文說明之

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109065.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

zzir 2019-08-26 13:45 評(píng)論0 收藏0