2. 程式人生 > 實用技巧 >淺談Vue中計算屬性computed的實現原理

淺談Vue中計算屬性computed的實現原理

阿新 • • 發佈：2020-11-17

雖然目前的技術棧已由Vue轉到了React，但從之前使用Vue開發的多個專案實際經歷來看還是非常愉悅的，Vue文件清晰規範，api設計簡潔高效，對前端開發人員友好，上手快，甚至個人認為在很多場景使用Vue比React開發效率更高，之前也有斷斷續續研讀過Vue的原始碼，但一直沒有梳理總結，所以在此做一些技術歸納同時也加深自己對Vue的理解，那麼今天要寫的便是Vue中最常用到的API之一computed的實現原理。

基本介紹

話不多說，一個最基本的例子如下：

<div id="app">
    <p>{{fullName}}</p>
</div>
new Vue({
    data: {
        firstName: 'Xiao',
        lastName: 'Ming'
    },
    computed: {
        fullName: function () {
            return this.firstName + ' ' + this.lastName
        }
    }
})

Vue中我們不需要在template裡面直接計算{{this.firstName + ' ' + this.lastName}}，因為在模版中放入太多宣告式的邏輯會讓模板本身過重，尤其當在頁面中使用大量複雜的邏輯表示式處理資料時，會對頁面的可維護性造成很大的影響，而computed的設計初衷也正是用於解決此類問題。

對比偵聽器watch

當然很多時候我們使用computed時往往會與Vue中另一個API也就是偵聽器watch相比較，因為在某些方面它們是一致的，都是以Vue的依賴追蹤機制為基礎，當某個依賴資料發生變化時，所有依賴這個資料的相關資料或函式都會自動發生變化或呼叫。

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過watch
選項提供了一個更通用的方法來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。

從vue官方文件對watch的解釋我們可以瞭解到，使用watch選項允許我們執行非同步操作 (訪問一個API)或高消耗效能的操作，限制我們執行該操作的頻率，並在我們得到最終結果前，設定中間狀態，而這些都是計算屬性無法做到的。

下面還另外總結了幾點關於computed和watch的差異：
  1. computed是計算一個新的屬性，並將該屬性掛載到vm（Vue例項）上，而watch是監聽已經存在且已掛載到vm上的資料，所以用watch同樣可以監聽computed計算屬性的變化（其它還有data
    、props）
  2. computed本質是一個惰性求值的觀察者，具有快取性，只有當依賴變化後，第一次訪問computed屬性，才會計算新的值，而watch則是當資料發生變化便會呼叫執行函式
  3. 從使用場景上說，computed適用一個數據被多個數據影響，而watch適用一個數據影響多個數據；

以上我們瞭解了computed和watch之間的一些差異和使用場景的區別，當然某些時候兩者並沒有那麼明確嚴格的限制，最後還是要具體到不同的業務進行分析。

原理分析

言歸正傳，回到文章的主題computed身上，為了更深層次地瞭解計算屬性的內在機制，接下來就讓我們一步步探索Vue原始碼中關於它的實現原理吧。

在分析computed原始碼之前我們先得對Vue的響應式系統有一個基本的瞭解，Vue稱其為非侵入性的響應式系統，資料模型僅僅是普通的JavaScript物件，而當你修改它們時，檢視便會進行自動更新。

當你把一個普通的 JavaScript 物件傳給 Vue 例項的data選項時，Vue 將遍歷此物件所有的屬性，並使用Object.defineProperty把這些屬性全部轉為getter/setter，這些getter/setter對使用者來說是不可見的，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化，每個元件例項都有相應的watcher例項物件，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的setter被呼叫時，會通知watcher重新計算，從而致使它關聯的元件得以更新。

Vue響應系統，其核心有三點：observe、watcher、dep：

  1. observe:遍歷data中的屬性，使用Object.defineProperty的get/set方法對其進行資料劫持
  2. dep：每個屬性擁有自己的訊息訂閱器dep，用於存放所有訂閱了該屬性的觀察者物件
  3. watcher：觀察者（物件），通過dep實現對響應屬性的監聽，監聽到結果後，主動觸發自己的回撥進行響應

對響應式系統有一個初步瞭解後，我們再來分析計算屬性。
首先我們找到計算屬性的初始化是在src/core/instance/state.js檔案中的initState函式中完成的

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  // computed初始化
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

呼叫了initComputed函式（其前後也分別初始化了initData和initWatch）並傳入兩個引數vm例項和opt.computed開發者定義的computed選項，轉到initComputed函式：

const computedWatcherOptions = { computed: true }

function initComputed (vm: Component, computed: Object) {
  // $flow-disable-line
  const watchers = vm._computedWatchers = Object.create(null)
  // computed properties are just getters during SSR
  const isSSR = isServerRendering()

  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    if (process.env.NODE_ENV !== 'production' && getter == null) {
      warn(
        `Getter is missing for computed property "${key}".`,
        vm
      )
    }

    if (!isSSR) {
      // create internal watcher for the computed property.
      watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        computedWatcherOptions
      )
    }

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    } else if (process.env.NODE_ENV !== 'production') {
      if (key in vm.$data) {
        warn(`The computed property "${key}" is already defined in data.`, vm)
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(`The computed property "${key}" is already defined as a prop.`, vm)
      }
    }
  }
}

從這段程式碼開始我們觀察這幾部分：

  1. 獲取計算屬性的定義userDef和getter求值函式

    const userDef = computed[key]
const getter = typeof userDef === 'function' ? userDef : userDef.get

    定義一個計算屬性有兩種寫法，一種是直接跟一個函式，另一種是新增set和get方法的物件形式，所以這裡首先獲取計算屬性的定義userDef，再根據userDef的型別獲取相應的getter求值函式。

  2. 計算屬性的觀察者watcher和訊息訂閱器dep

    watchers[key] = new Watcher(
    vm,
    getter || noop,
    noop,
    computedWatcherOptions
)

    這裡的watchers也就是vm._computedWatchers物件的引用，存放了每個計算屬性的觀察者watcher例項（注：後文中提到的“計算屬性的觀察者”、“訂閱者”和watcher均指代同一個意思但注意和Watcher建構函式區分），Watcher建構函式在例項化時傳入了4個引數：vm例項、getter求值函式、noop空函式、computedWatcherOptions常量物件（在這裡提供給Watcher一個標識{computed:true}項，表明這是一個計算屬性而不是非計算屬性的觀察者，我們來到Watcher建構函式的定義：

    class Watcher {
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    if (options) {
      this.computed = !!options.computed
    } 

    if (this.computed) {
      this.value = undefined
      this.dep = new Dep()
    } else {
      this.value = this.get()
    }
  }
  
  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      
    } finally {
      popTarget()
    }
    return value
  }
  
  update () {
    if (this.computed) {
      if (this.dep.subs.length === 0) {
        this.dirty = true
      } else {
        this.getAndInvoke(() => {
          this.dep.notify()
        })
      }
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

  evaluate () {
    if (this.dirty) {
      this.value = this.get()
      this.dirty = false
    }
    return this.value
  }

  depend () {
    if (this.dep && Dep.target) {
      this.dep.depend()
    }
  }
}

    為了簡潔突出重點，這裡我手動去掉了我們暫時不需要關心的程式碼片段。
    觀察Watcher的constructor，結合剛才講到的new Watcher傳入的第四個引數{computed:true}知道，對於計算屬性而言watcher會執行if條件成立的程式碼this.dep = new Dep()，而dep也就是建立了該屬性的訊息訂閱器。

    export default class Dep {
  static target: ?Watcher;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

Dep.target = null

    dep同樣精簡了部分程式碼，我們觀察Watcher和dep的關係，用一句話總結

    watcher中例項化了dep並向dep.subs中添加了訂閱者，dep通過notify遍歷了dep.subs通知每個watcher更新。

  3. defineComputed定義計算屬性

    if (!(key in vm)) {
  defineComputed(vm, key, userDef)
} else if (process.env.NODE_ENV !== 'production') {
  if (key in vm.$data) {
    warn(`The computed property "${key}" is already defined in data.`, vm)
  } else if (vm.$options.props && key in vm.$options.props) {
    warn(`The computed property "${key}" is already defined as a prop.`, vm)
  }
}

    因為computed屬性是直接掛載到例項物件中的，所以在定義之前需要判斷物件中是否已經存在重名的屬性，defineComputed傳入了三個引數：vm例項、計算屬性的key以及userDef計算屬性的定義（物件或函式）。
    然後繼續找到defineComputed定義處：

    export function defineComputed (
  target: any,
  key: string,
  userDef: Object | Function
) {
  const shouldCache = !isServerRendering()
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : userDef
    sharedPropertyDefinition.set = noop
  } else {
    sharedPropertyDefinition.get = userDef.get
      ? shouldCache && userDef.cache !== false
        ? createComputedGetter(key)
        : userDef.get
      : noop
    sharedPropertyDefinition.set = userDef.set
      ? userDef.set
      : noop
  }
  if (process.env.NODE_ENV !== 'production' &&
      sharedPropertyDefinition.set === noop) {
    sharedPropertyDefinition.set = function () {
      warn(
        `Computed property "${key}" was assigned to but it has no setter.`,
        this
      )
    }
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

    在這段程式碼的最後呼叫了原生Object.defineProperty方法，其中傳入的第三個引數是屬性描述符sharedPropertyDefinition，初始化為：

    const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}

    隨後根據Object.defineProperty前面的程式碼可以看到sharedPropertyDefinition的get/set方法在經過userDef和shouldCache等多重判斷後被重寫，當非服務端渲染時，sharedPropertyDefinition的get函式也就是createComputedGetter(key)的結果，我們找到createComputedGetter函式呼叫結果並最終改寫sharedPropertyDefinition大致呈現如下：

    sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: function computedGetter () {
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
            watcher.depend()
            return watcher.evaluate()
        }
    },
    set: userDef.set || noop
}

    當計算屬性被呼叫時便會執行get訪問函式，從而關聯上觀察者物件watcher。

分析完以上步驟，我們再來梳理下整個流程：

  1. 當元件初始化的時候，computed和data會分別建立各自的響應系統，Observer遍歷data中每個屬性設定get/set資料攔截

  2. 初始化computed會呼叫initComputed函式

    1. 註冊一個watcher例項，並在內例項化一個Dep訊息訂閱器用作後續收集依賴（比如渲染函式的watcher或者其他觀察該計算屬性變化的watcher）
    2. 呼叫計算屬性時會觸發其Object.defineProperty的get訪問器函式
    3. 呼叫watcher.depend()方法向自身的訊息訂閱器dep的subs中新增其他屬性的watcher
    4. 呼叫watcher的evaluate方法（進而呼叫watcher的get方法）讓自身成為其他watcher的訊息訂閱器的訂閱者，首先將watcher賦給Dep.target，然後執行getter求值函式，當訪問求值函式裡面的屬性（比如來自data、props或其他computed）時，會同樣觸發它們的get訪問器函式從而將該計算屬性的watcher新增到求值函式中屬性的watcher的訊息訂閱器dep中，當這些操作完成，最後關閉Dep.target賦為null並返回求值函式結果。
  3. 當某個屬性發生變化，觸發set攔截函式，然後呼叫自身訊息訂閱器dep的notify方法，遍歷當前dep中儲存著所有訂閱者wathcer的subs陣列，並逐個呼叫watcher的update方法，完成響應更新。

相關推薦

淺談Vue中計算屬性computed的實現原理

雖然目前的技術棧已由Vue轉到了React，但從之前使用Vue開發的多個專案實際經歷來看還是非常愉悅的，Vue文件清晰規範，api設計簡潔高效，對前端開發人員友好，上手快，甚至個人認為在很多場景使用Vue比React開發效率更

vue(34)vue中CompositionAPI中計算屬性computed的使用

<template> <divclass=\"home\"> {{age}} <br> <button@click=\"add()\">change</button>

淺談VUE中演示v-for為什麼要加key

說到這個問題想必要舉個例子了 沒有key <div id=\"app\"> <div> <input type=\"text\" v-model=\"name\">

淺談SciPy中的optimize.minimize實現受限優化問題

問題描述：有一批樣本x，每個樣本都有幾個固定的標籤，如（男，24歲，上海），需要從中抽取一批樣本，使樣本總的標籤比例滿足分佈P(x)，如（男:女=49%:51%、20歲:30歲=9%:11%、..........）

淺談keras中的Merge層(實現層的相加、相減、相乘例項)

【題目】keras中的Merge層（實現層的相加、相減、相乘） 詳情請參考： Merge層 一、層相加

淺談vue中document.getElementById()拿到的是原值的問題

問題 兩個介面都有id=\"test\"的div，內容不同，路由切換的時候document.getElementById()拿到的是原介面的值。

淺談vue中$bus的使用和涉及到的問題

Hello大家週末好，最近專案比較忙所以沒有及時的更新抱歉，今天給大家講一vue.bus。使用過的都知道$bus是兄弟之間相互傳值的專案中說實話用的地方不算多但是也會用到（每一個領域都是會有坑的呀）。

淺談vue中使用編輯器vue-quill-editor踩過的坑

結合vue+element-ui+vue-quill+editor二次封裝成元件 1.圖片上傳 分析原因 專案中使用vue-quill-editor富文字編輯器，在編輯內容的時候，我們往往會編輯圖片，而vue-quill-editor預設的處理方式是直接將圖片轉成base

淺談vue中get請求解決傳輸資料是陣列格式的問題

qs的stringify接收2個引數，第一個引數是需要序列化的物件，第二個引數是轉化格式,一般預設格式是給出明確的索引，如：arr[0]=1&arr[1]=2

淺談vue中$event理解和框架中在包含預設值外傳參

在vue中普通方法中預設帶有event DOM事件如greet方法，如果是行內函數的話如warn方法，只需要在定義方法的地方同時傳入$event即可，這裡需要強調的是在iview中，這裡用的是select元件，在其on-change事件中如果想要

Vue之計算屬性Computed和屬性監聽Watch，Computed和Watch的區別

一、 計算屬性（computed） 1.計算屬性是為了模板中的表示式簡潔，易維護，符合用於簡單運算的設計初衷。

淺談vue中resetFields()使用注意事項

this.$refs.frmAdd.resetFields();這句在使用中有些時候不會有啥問題，但有時候就會出問題，而且特別難纏，我原來這麼使用就沒問題啊，怎麼這裡就會有問題，查詢各種資料總結得出：

淺談CSS中position屬性

定位元素（positioned element）是其計算後位置屬性為 relative, absolute, fixed 或 sticky 的一個元素（換句話說，除static以外的任何東西）。

淺談vue中index.html、main.js、App.vue、index.js之前的關係以及載入過程

引自：https://blog.csdn.net/qq_34182808/article/details/86690193 前序 承接上一遍“通過webpack構建vue專案”構建的專案檔案，簡單闡述一下當我們構建完成後，vue專案中的index.html、main.js、App.vue、index.

淺談vue3中effect與computed的親密關係

在我剛看完vue3響應式的時候，心中就有一個不可磨滅的謎團，讓我茶不思飯不想，總想生病。那麼這個謎團是什麼呢？就是在響應式中一直穿行在tranger跟track之間的effect。如果單純的響應式原理根本就用不上effect，那

vue中計算屬性和觀察屬性

技術標籤：學習筆記vue vue中計算屬性和觀察屬性 計算屬性： computed用來監控自己定義的變數，該變數不在data裡面宣告，直接在computed裡面定義，然後就可以在頁面上進行雙向資料繫結展示出結果或者用作其他處理

Vue的計算屬性computed

技術標籤：Vuevuevue.js 一，作用 簡化模板，將複雜的計算邏輯寫在計算屬性中 <div id="app">

Vue中計算屬性是方法

對於常規的計算屬性，都是直接返回單個值，如： computed: { result() { return this.one + this.two

淺談vue中所有的封裝方式總結

目錄1.封裝API2.註冊全域性工具元件 3.封裝全域性函式4.為了減少頁面程式碼量的封裝如何確定我需要封裝呢？

淺談VUE中的深拷貝與淺拷貝Object.assign()方法

Object.assign()方法 基本用法 Object.assign()方法用於物件的合併，將源物件（source）的所有可列舉屬性，複製到目標物件（target）。