天天看點
傳回

為什麼說 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 的遞歸更新，是不是還是好上很多呢？

贈禮 一個小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
  }
}
複制代碼

複制

後記

如果你對于

Dep.target

、

渲染watcher

等概念還不太了解，可以看我寫的一篇最簡實作 Vue 響應式的文章，歡迎閱讀：

手把手帶你實作一個最精簡的響應式系統來學習Vue的data、computed、watch源碼

本文也存放在我的Github部落格倉庫中，歡迎訂閱和star。

特别鳴謝

感謝 嵇智 大佬對于本文一些細節的糾正。

❤️感謝大家

上一篇: 多項目晶圓(Multi Project Wafer,MPW)
下一篇: 企業級業務架構與“中台”的關系