為什么說 Vue 的響應式更新比 React 快

前言

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

例子

舉例來說 這樣的一個組件：

<template> <div> {{ msg }} <ChildComponent /> </div> </template> 復制代碼

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

但是 <ChildComponent /> 這個組件其實是不會重新渲染的，這是 Vue 刻意而為之的。

在以前的一段時間里，我曾經認為因為組件是一棵樹，所以它的更新就是理所當然的深度遍歷這棵樹，進行遞歸更新。本篇就從源碼的角度帶你一起分析，Vue 是怎么做到精確更新的。

React的更新粒度

而 React 在類似的場景下是自頂向下的進行遞歸更新的，也就是說，React 中假如 ChildComponent 里還有十層嵌套子元素，那么所有層次都會遞歸的重新render（在不進行手動優化的情況下），這是性能上的災難。（因此，React 創造了Fiber，創造了異步渲染，其實本質上是彌補被自己搞砸了的性能）。

他們能用收集依賴的這套體系嗎？不能，因為他們遵從Immutable的設計思想，永遠不在原對象上修改屬性，那么基於 Object.defineProperty 或 Proxy 的響應式依賴收集機制就無從下手了（你永遠返回一個新的對象，我哪知道你修改了舊對象的哪部分？）

同時，由於沒有響應式的收集依賴，React 只能遞歸的把所有子組件都重新 render一遍（除了memo和shouldComponentUpdate這些優化手段），然后再通過 diff算法 決定要更新哪部分的視圖，這個遞歸的過程叫做 reconciler，聽起來很酷，但是性能很災難。

Vue的更新粒度

那么，Vue 這種精確的更新是怎么做的呢？其實每個組件都有自己的渲染 watcher，它掌管了當前組件的視圖更新，但是並不會掌管 ChildComponent 的更新。

具體到源碼中，是怎么樣實現的呢？

在 patch 的過程中，當組件更新到ChildComponent的時候，會走到 patchVnode，那么這個方法大致做了哪些事情呢？

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 ) }, 復制代碼

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

1. 更新props（后續詳細講）
2. 更新綁定事件
3. 對於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.2 版本提了一個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 } }

作者：晨曦時夢見兮
鏈接：https://juejin.im/post/5e854a32518825736c5b807f
來源：掘金