前言

我們都知道 Vue 對(duì)于響應(yīng)式屬性的更新，只會(huì)精確更新依賴收集的當(dāng)前組件，而不會(huì)遞歸的去更新子組件，這也是它性能強(qiáng)大的原因之一。

例子

舉例來說 這樣的一個(gè)組件：

<template>
  <div>
   {{ msg }}
   <ChildComponent />
  </div>
</template>

我們?cè)谟|發(fā) this.msg = 'Hello, Changed~'的時(shí)候，會(huì)觸發(fā)組件的更新，視圖的重新渲染。

但是 <ChildComponent /> 這個(gè)組件其實(shí)是不會(huì)重新渲染的，這是 Vue 刻意而為之的。

在以前的一段時(shí)間里，我曾經(jīng)認(rèn)為因?yàn)榻M件是一棵樹，所以它的更新就是理所當(dāng)然的深度遍歷這棵樹，進(jìn)行遞歸更新。本篇就從源碼的角度帶你一起分析，Vue 是怎么做到精確更新的。

React的更新粒度

而 React 在類似的場(chǎng)景下是自頂向下的進(jìn)行遞歸更新的，也就是說，React 中假如 ChildComponent 里還有十層嵌套子元素，那么所有層次都會(huì)遞歸的重新render（在不進(jìn)行手動(dòng)優(yōu)化的情況下），這是性能上的災(zāi)難。（因此，React 創(chuàng)造了Fiber，創(chuàng)造了異步渲染，其實(shí)本質(zhì)上是彌補(bǔ)被自己搞砸了的性能）。

他們能用收集依賴的這套體系嗎？不能，因?yàn)樗麄冏駨腎mmutable的設(shè)計(jì)思想，永遠(yuǎn)不在原對(duì)象上修改屬性，那么基于Object.defineProperty 或 Proxy 的響應(yīng)式依賴收集機(jī)制就無從下手了（你永遠(yuǎn)返回一個(gè)新的對(duì)象，我哪知道你修改了舊對(duì)象的哪部分？）

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

Vue的更新粒度

那么，Vue 這種精確的更新是怎么做的呢？其實(shí)每個(gè)組件都有自己的渲染 watcher，它掌管了當(dāng)前組件的視圖更新，但是并不會(huì)掌管 ChildComponent 的更新。

具體到源碼中，是怎么樣實(shí)現(xiàn)的呢？

在 patch  的過程中，當(dāng)組件更新到ChildComponent的時(shí)候，會(huì)走到patchVnode，那么這個(gè)方法大致做了哪些事情呢？

patchVnode

執(zhí)行 vnode 的 prepatch 鉤子。

注意，只有 組件vnode 才會(huì)有 prepatch 這個(gè)生命周期，

這里會(huì)走到updateChildComponent方法，這個(gè) child 具體指什么呢？

 prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
  const options = vnode.componentOptions
  // 注意 這個(gè)child就是ChildComponent組件的 vm 實(shí)例，也就是咱們平常用的 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
  )
 },

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

• 更新props（后續(xù)詳細(xì)講）
• 更新綁定事件
• 對(duì)于slot做一些更新（后續(xù)詳細(xì)講）

如果有子節(jié)點(diǎn)的話，對(duì)子節(jié)點(diǎn)進(jìn)行 diff。

比如這樣的場(chǎng)景：

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
<ul>

要對(duì)于 ul 中的三個(gè) li 子節(jié)點(diǎn) vnode 利用 diff 算法來更新，本篇略過。

然后到此為止，patchVnode 就結(jié)束了，并沒有像常規(guī)思維中的那樣去遞歸的更新子組件樹。

這也就說明了，Vue 的組件更新確實(shí)是精確到組件本身的。

如果是子組件呢？

假設(shè)列表是這樣的：

<ul>
 <component>1</component>
 <component>2</component>
 <component>3</component>
<ul>

那么在diff的過程中，只會(huì)對(duì) component 上聲明的 props、listeners等屬性進(jìn)行更新，而不會(huì)深入到組件內(nèi)部進(jìn)行更新。

注意：不會(huì)深入到組件內(nèi)部進(jìn)行更新?。▌澲攸c(diǎn)，這也是本文所說的更新粒度的關(guān)鍵）

props的更新如何觸發(fā)重渲染？

那么有同學(xué)可能要問了，如果不會(huì)遞歸的去對(duì)子組件更新，如果我們把 msg 這個(gè)響應(yīng)式元素通過props傳給 ChildComponent，此時(shí)它怎么更新呢？

首先，在組件初始化 props的時(shí)候，會(huì)走到 initProps 方法。

const props = vm._props = {}

 for (const key in propsOptions) {
  // 經(jīng)過一系列驗(yàn)證props合法性的流程后
  const value = validateProp(key, propsOptions, propsData, vm)
  // props中的字段也被定義成響應(yīng)式了
  defineReactive(props, key, value)
}

至此為止，是實(shí)現(xiàn)了對(duì)于 _props 上字段變更的劫持。也就是變成了響應(yīng)式數(shù)據(jù)，后面我們做類似于 _props.msg = 'Changed' 的操作時(shí)（當(dāng)然我們不會(huì)這樣做，Vue內(nèi)部會(huì)做），就會(huì)觸發(fā)視圖更新。

其實(shí)，msg 在傳給子組件的時(shí)候，會(huì)被保存在子組件實(shí)例的 _props 上，并且被定義成了響應(yīng)式屬性，而子組件的模板中對(duì)于 msg 的訪問其實(shí)是被代理到 _props.msg 上去的，所以自然也能精確的收集到依賴，只要 ChildComponent 在模板里也讀取了這個(gè)屬性。

這里要注意一個(gè)細(xì)節(jié)，其實(shí)父組件發(fā)生重渲染的時(shí)候，是會(huì)重新計(jì)算子組件的 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?
   // 就是這句話，觸發(fā)了對(duì)于 _props.msg 的依賴更新。
   props[key] = validateProp(key, propOptions, propsData, vm)
  }
  toggleObserving(true)
  // keep a copy of raw propsData
  vm.$options.propsData = propsData
 }

那么，由于上面注釋標(biāo)明的那段代碼，msg 的變化通過 _props 的響應(yīng)式能力，也讓子組件重新渲染了，到目前為止，都只有真的用到了 msg 的組件被重新渲染了。

正如官網(wǎng) api 文檔中所說：

vm.$forceUpdate：迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
—— vm-forceUpdate文檔

我們需要知道一個(gè)小知識(shí)點(diǎn)，vm.$forceUpdate 本質(zhì)上就是觸發(fā)了渲染watcher的重新執(zhí)行，和你去修改一個(gè)響應(yīng)式的屬性觸發(fā)更新的原理是一模一樣的，它只是幫你調(diào)用了 vm._watcher.update()（只是提供給你了一個(gè)便捷的api，在設(shè)計(jì)模式中叫做門面模式）

slot是怎么更新的？

注意這里也提到了一個(gè)細(xì)節(jié)，也就是 插入插槽內(nèi)容的子組件：

舉例來說

假設(shè)我們有父組件parent-comp：

<div>
 <slot-comp>
   <span>{{ msg }}</span>
 </slot-comp>
</div>

子組件 slot-comp：

<div>
  <slot></slot>
</div>

組件中含有 slot的更新 ，是屬于比較特殊的場(chǎng)景。

這里的 msg 屬性在進(jìn)行依賴收集的時(shí)候，收集到的是 parent-comp 的`渲染watcher。（至于為什么，你看一下它所在的渲染上下文就懂了。）

那么我們想象 msg 此時(shí)更新了，

<div>
 <slot-comp>
   <span>{{ msg }}</span>
 </slot-comp>
</div>

這個(gè)組件在更新的時(shí)候，遇到了一個(gè)子組件 slot-comp，按照 Vue 的精確更新策略來說，子組件是不會(huì)重新渲染的。

但是在源碼內(nèi)部，它做了一個(gè)判斷，在執(zhí)行 slot-comp 的 prepatch 這個(gè)hook的時(shí)候，會(huì)執(zhí)行 updateChildComponent 邏輯，在這個(gè)函數(shù)內(nèi)部會(huì)發(fā)現(xiàn)它有 slot 元素。

 prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
  const options = vnode.componentOptions
  // 注意 這個(gè)child就是 slot-comp 組件的 vm 實(shí)例，也就是咱們平常用的 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 內(nèi)部

 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
 )

然后下面走一個(gè)判斷

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

這里調(diào)用了 slot-comp 組件vm實(shí)例上的 $forceUpdate，那么它所觸發(fā)的渲染watcher就是屬于slot-comp的渲染watcher了。
總結(jié)來說，這次 msg 的更新不光觸發(fā)了 parent-comp 的重渲染，也進(jìn)一步的觸發(fā)了擁有slot的子組件 slot-comp 的重渲染。
它也只是觸發(fā)了兩層渲染，如果 slot-comp 內(nèi)部又渲染了其他組件 slot-child，那么此時(shí)它是不會(huì)進(jìn)行遞歸更新的。（只要 slot-child 組件不要再有 slot 了）。

比起 React 的遞歸更新，是不是還是好上很多呢？

贈(zèng)禮 一個(gè)小issue

有人給 Vue 2.4.2 版本提了一個(gè)issue，在下面的場(chǎng)景下會(huì)出現(xiàn) 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
 }
});

具體的表現(xiàn)是點(diǎn)擊 click按鈕，會(huì) alert 出兩次 update twice。 這是由于子組件在執(zhí)行 data 這個(gè)函數(shù)初始化組件的數(shù)據(jù)時(shí)，會(huì)錯(cuò)誤的再收集一遍 Dep.target （也就是渲染watcher）。

由于數(shù)據(jù)初始化的時(shí)機(jī)是 beforeCreated -> created 之間，此時(shí)由于還沒有進(jìn)入子組件的渲染階段， Dep.target 還是父組件的渲染watcher。

這就導(dǎo)致重復(fù)收集依賴，重復(fù)觸發(fā)同樣的更新

怎么解決的呢？很簡(jiǎn)單，在執(zhí)行 data 函數(shù)的前后，把 Dep.target 先設(shè)置為 null 即可，在 finally 中再恢復(fù)，這樣響應(yīng)式數(shù)據(jù)就沒辦法收集到依賴了。

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
 }
}

后記

如果你對(duì)于 Dep.target、 渲染watcher等概念還不太理解，可以看我寫的一篇最簡(jiǎn)實(shí)現(xiàn) Vue 響應(yīng)式的文章，歡迎閱讀：
手把手帶你實(shí)現(xiàn)一個(gè)最精簡(jiǎn)的響應(yīng)式系統(tǒng)來學(xué)習(xí)Vue的data、computed、watch源碼

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

到此這篇關(guān)于原理深度解析Vue的響應(yīng)式更新比React快的文章就介紹到這了,更多相關(guān)Vue的響應(yīng)式更新比React快內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論