爲何說 Vue 的響應式更新精確到組件級別?(原理深度解析~)

時間 2020-07-06

標籤爲何 vue 響應更新精確組件級別原理深度解析简体版

原文原文鏈接

前言

咱們都知道 Vue 對於響應式屬性的更新，只會精確更新依賴收集的當前組件，而不會遞歸的去更新子組件，這也是它性能強大的緣由之一。vue

例子

舉例來講這樣的一個組件：node

<template>
   <div>
      {{ msg }}
      <ChildComponent />
   </div>
</template>
複製代碼

咱們在觸發 this.msg = 'Hello,Changed~' 的時候，會觸發組件的更新，視圖的從新渲染。git

可是 <ChildComponent / > 這個組件實際上是不會從新渲染的，這是 Vue 刻意而爲之的。github

在之前的一段時間裏，我曾經認爲由於組件是一棵樹，因此它的更新就是理所固然的深度遍歷這棵樹，進行遞歸更新，本篇就從源碼的角度帶你一塊兒分析，Vue 是怎麼作到 精確更新 的。算法

React的更新力度

而 React 在相似的場景下是自定向下的進行遞歸更新的，也就是說，React 中加入 ChildComponent 裏還有十層嵌套子元素，那麼全部層次都會遞歸的從新 render (在不進行手動優化的狀況下)，這是性能上的災難。 (所以，React 創造了 Fiber，創造了異步渲染，其實本質上是彌補被自已搞砸了的性能)。設計模式

他們能用收集依賴的這套體系嗎? 顯然是不能的，由於它們聽從 Immutable 的設計思想，永遠再也不原對象上修改屬性，那麼基於 object.defineProperty 或 Proxy 的響應式依賴收集機制就無從下手了(你永遠返回一個新的對象，我哪知道你修改了舊對象的哪部分？)api

同時，因爲沒有響應式的收集依賴，React 只能遞歸的把全部子組件都從新 render 一遍(除了memo和shouldComponentUpdate這些優化手段)，而後再經過 diff算法決定要更新哪部分的視圖，這個遞歸的過程叫作 reconiler，聽起來很酷，可是性能很災難。app

Vue的更新力度

那麼，Vue這種精確的更新是怎麼作呢？其實每一個組件都有自已的渲染 watcher，它掌管了當前組件的視圖更新，可是並不會掌管 ChildComponent 的更新。異步

具體到源碼中，是怎樣實現的呢?函數

在 patch 的過程當中，當組件更新到 ChildComponent 的時候，會走到 pathVnode，那麼這個方法大體作了哪些事情呢？

patchVnode

執行 vnode 的 prepatch 鉤子。

注意，只有組件vnode 纔會有 prepatch 這個生命週期。

這裏會走到 updateChildComponent 方法，這個 child 具體指什麼呢？

prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    const options = vnode.componentOptions
    // 注意 這個child就是ChildComponent組件的 vm 實例，也就是我們日常用的 this
    const child = vnode.componentInstance = oldVnode.componentInstance
    updateChildComponent(
      child,
      options.propsData, // updated props
      options.listeners, // updated listeners
      vnode, // new parent vnode
      options.children // new children
    )
  },
複製代碼

其實看傳入的參數也能猜到大概了，就是作了：

更新props (後續詳細講)
更新綁定事件
對於slot作一些更新 (後續詳細講)

若是有子節點的話，對子節點進行 diff。

好比這樣的場景：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>
複製代碼

要對於 ul 中的三個 li 子節點 vnode 利用 diff 算法來更新。

而後到此爲止，patchVnode 就結束了，並無像常規思惟中的那樣去遞歸的更新子組件樹。

這也就說明了，Vue 的組件更新確實是精確到組件自己的。

若是是子組件呢？

假設列表是這樣的:

<ul>
  <component>1</component>
  <component>2</component>
  <component>3</component>
<ul>
複製代碼

那麼在diff的過程當中，只會對 component 上聲明的 props、listeners 等屬性進行更新，而不會深刻到組件內部進行更新。

注意：不會深刻到組件內部進行更新！(劃重點，這也是本文所說的更新力度的關鍵)

props的更新如何觸發重渲染？

那麼有同窗可能要問了，若是不會遞歸的去對子組件更新，若是咱們把 msg 這個響應式元素經過props傳給 ChildComponent，此時它怎麼更新呢？

首先，在組件初始化 props的時候，會走到 initProps 方法。

const props = vm._props = {}

 for (const key in propsOptions) {
    // 通過一系列驗證props合法性的流程後
    const value = validateProp(key, propsOptions, propsData, vm)
    // props中的字段也被定義成響應式了
    defineReactive(props, key, value)
}
複製代碼

至此爲止，是實現了對於 _props 上字段變動的劫持。也就是變成了響應式數據，後面咱們作相似於 _props.msg = 'Changed' 的操做時（固然咱們不會這樣作，Vue內部會作），就會觸發視圖更新。

其實，msg 在傳給子組件的時候，會被保存在子組件實例的 _props 上，而且被定義成了響應式屬性，而子組件的模板中對於 msg 的訪問實際上是被代理到 _props.msg 上去的，因此天然也能精確的收集到依賴，只要 ChildComponent 在模板裏也讀取了這個屬性。

這裏要注意一個細節，其實父組件發生重渲染的時候，是會從新計算子組件的 props 的，具體是在 updateChildComponent 中的：

// update props
  if (propsData && vm.$options.props) {
    toggleObserving(false)
    // 注意props被指向了 _props
    const props = vm._props
    const propKeys = vm.$options._propKeys || []
    for (let i = 0; i < propKeys.length; i++) {
      const key = propKeys[i]
      const propOptions: any = vm.$options.props // wtf flow?
      // 就是這句話，觸發了對於 _props.msg 的依賴更新。
      props[key] = validateProp(key, propOptions, propsData, vm)
    }
    toggleObserving(true)
    // keep a copy of raw propsData
    vm.$options.propsData = propsData
  }
複製代碼

那麼，因爲上面註釋代表的那段代碼，msg 的變化經過 _props 的響應式能力，也讓子組件從新渲染了，到目前爲止，都只有真的用到了 msg 的組件被從新渲染了。

正如官網 api 文檔中所說：

vm.$forceUpdate：迫使 Vue 實例從新渲染。注意它僅僅影響實例自己和插入插槽內容的子組件，而不是全部子組件。 —— vm-forceUpdate文檔

咱們須要知道一個小知識點，vm.$forceUpdate 本質上就是觸發了渲染watcher 的從新執行，和你去修改一個響應式的屬性觸發更新的原理是如出一轍的，它只是幫你調用了 vm._watcher.update() (只是提供給你一個便捷的api，在設計模式中叫作門面模式)

slot是怎麼更新的？

注意這裏也提到一個細節，也就是插入插槽內容的子組件:

舉例來講

假設咱們有父組件 parent-comp ：

<div>
  <slot-comp> <span>{{ msg }}</span> </slot-comp> </div>
複製代碼

子組件 slot-comp：

<div>
   <slot></slot>
</div>
複製代碼

組件中含有 slot 的更新，是屬於比較特殊的場景。

這裏的 msg 屬性在進行依賴收集的時候，收集到的是 parent-comp 的渲染watcher。(至於爲何，你看一下它所在的渲染上下文就懂了)。

那麼咱們想象 msg 此時更新了，

<div>
  <slot-comp> <span>{{ msg }}</span> </slot-comp> </div>
複製代碼

這個組件在更新的時候，遇到了一個子組件 slot-comp，按照 Vue 的精確更新策略來講，子組件是不會從新渲染的。

可是在源碼內部，它作了一個判斷，在執行 slot-comp 的 prepatch 這個hook的時候，會執行 updateChildComponent 邏輯，在這個函數內部會發現它有 slot 元素。

prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    const options = vnode.componentOptions
    // 注意 這個child就是 slot-comp 組件的 vm 實例，也就是我們日常用的 this
    const child = vnode.componentInstance = oldVnode.componentInstance
    updateChildComponent(
      child,
      options.propsData, // updated props
      options.listeners, // updated listeners
      vnode, // new parent vnode
      options.children // new children
    )
  },
複製代碼

在 updateChildComponent 內部

const hasChildren = !!(
    // 這玩意就是 slot 元素
    renderChildren ||               // has new static slots
    vm.$options._renderChildren ||  // has old static slots
    parentVnode.data.scopedSlots || // has new scoped slots
    vm.$scopedSlots !== emptyObject // has old scoped slots
  )
複製代碼

而後下面走一個判斷

if (hasChildren) {
    vm.$slots = resolveSlots(renderChildren, parentVnode.context)
    vm.$forceUpdate()
  }
複製代碼

這裏調用了 slot-comp 組件vm實例上的 $forceUpdate，那麼它所觸發的渲染watcher 就是屬於 slot-comp 的渲染watcher 了。

總結來講，此次 msg 的更新不光觸發了 parent-comp 的重渲染，也進一步的觸發了擁有slot的子組件 slot-comp 的重渲染。

它也只是觸發了兩層渲染，若是 slot-comp 內部又渲染了其餘組件 slot-child，那麼此時它是不會進行遞歸更新的。(只要 slot-child 組件不要再有 slot 了)。

比起 React 的遞歸更新，是否是仍是好上不少呢？

父子組件的更新會經歷兩個 nextTick 嗎？

答案是不會：注意看源碼 queueWatcher 裏的邏輯，父組件更新的時候全局變量 isFlushing 是 true，因此不會等到下個 tick 執行，而是直接推動隊列裏，在一個 tick 裏一塊兒更新掉了。

父組件更新的 nextTick 中會執行這個，會去循環運行 queue 裏的 watcher

function flushSchedulerQueue () {
  currentFlushTimestamp = getNow()
  flushing = true
  for (index = 0; index < queue.length; index++) {
     // 更新父組件
     watcher.run()
  }
}
複製代碼

而在父組件更新的過程當中又觸發了子組件的響應式更新，致使觸發了 queueWatcher 的話，因爲 isFlushing 是 true，會這樣走 else 中的邏輯，因爲子組件的 id 是大於父組件的 id 的，因此會在插入在父組件的 watcher 以後，父組件的更新函數執行完畢後，天然就會執行子組件的 watcher 了。這是在同一個 tick 中的。

if (!flushing) {
  queue.push(watcher)
} else {
  // if already flushing, splice the watcher based on its id
  // if already past its id, it will be run next immediately.
  let i = queue.length - 1
  while (i > index && queue[i].id > watcher.id) {
    i--
  }
  queue.splice(i + 1, 0, watcher)
}
複製代碼

只是在隊列中加入了這個 watcher 直接執行。

Vue 2.6 的優化

Vue 2.6 把上述對於 slot 的操做又進一步優化了，簡單來講，利用

<slot-comp>
  <template v-slot:foo>
    {{ msg }}
  </template>
</slot-comp>
複製代碼

這種語法生成的插槽，會統一被編譯成函數，在子組件的上下文中執行，因此父組件不會在收集到它內部的依賴，若是父組件中沒有用到 msg，更新只會影響到子組件自己。而再也不試從經過父組件修改 _props 來通知子組件更新了。

贈送一個小issue

有人給 Vue 2.4 版本提了一個issue，在下面的場景下會出現 bug。

let Child = {
  name: "child",
  template:
    '<div><span>{{ localMsg }}</span><button @click="change">click</button></div>',
  data: function() {
    return {
      localMsg: this.msg
    };
  },
  props: {
    msg: String
  },
  methods: {
    change() {
      this.$emit("update:msg", "world");
    }
  }
};

new Vue({
  el: "#app",
  template: '<child :msg.sync="msg"><child>',
  beforeUpdate() {
    alert("update twice");
  },
  data() {
    return {
      msg: "hello"
    };
  },
  components: {
    Child
  }
});
複製代碼

具體的表現是點擊 click按鈕，會 alert 出兩次 update twice。這是因爲子組件在執行 data 這個函數初始化組件的數據時，會錯誤的再收集一遍 Dep.target （也就是渲染watcher）。

因爲數據初始化的時機是 beforeCreated -> created 之間，此時因爲尚未進入子組件的渲染階段， Dep.target 仍是父組件的渲染watcher。

這就致使重複收集依賴，重讀觸發一樣的更新，具體表現能夠看這裏： jsfiddle.net/sbmLobvr/9

怎麼解決的呢？很簡單，在執行 data 函數的先後，把 Dep.target 先設置爲 null 便可，在 finally 中在恢復，這樣響應式數據就沒辦法收集到依賴了。

export function getData (data: Function, vm: Component): any {
  const prevTarget = Dep.target
+ Dep.target = null
  try {
    return data.call(vm, vm)
  } catch (e) {
    handleError(e, vm, `data()`)
    return {}
+ } finally {
+   Dep.target = prevTarget
  }
}
複製代碼