前言

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

例子

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

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

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

但是 這個組件其實(shí)是不會重新渲染的，這是 Vue 刻意而為之的。

React的更新粒度

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

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

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

Vue的更新粒度

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

那么有同學(xué)可能要問了，如果我們把 msg 這個響應(yīng)式元素通過props傳給 ChildComponent，此時它怎么更新呢？

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

這里要注意一個細(xì)節(jié)，其實(shí)父組件發(fā)生重渲染的時候，是會重新計(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ā)了對于 _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 的組件被重新渲染了。

這也是為什么我們說：Vue 的響應(yīng)式更新粒度是精細(xì)到組件級別的。

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

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

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

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

舉例來說

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

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

子組件 slot-comp：

<slot>slot>div>

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

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

那么我們想象 msg 此時更新了，

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

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

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

prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
const options = vnode.componentOptions
// 注意 這個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
)

然后下面走一個判斷

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，那么此時它是不會進(jìn)行遞歸更新的。(只要 slot-child 組件不要再有 slot 了)。

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

后記

如果你對于 渲染watcher等概念一頭霧水，關(guān)于響應(yīng)式原理，我寫了一篇最簡實(shí)現(xiàn) Vue 響應(yīng)式的文章，歡迎閱讀：

手把手帶你實(shí)現(xiàn)一個最精簡的響應(yīng)式系統(tǒng)來學(xué)習(xí)Vue的data、computed、watch源碼

https://juejin.im/post/5db6433b51882564912fc30f

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

https://github.com/sl1673495/blogs

鳴謝

感謝 嵇智大佬 對于本文一些細(xì)節(jié)的糾正。

https://github.com/theniceangel

總結(jié)

以上是生活随笔為你收集整理的vue 渲染函数处理slot_面试官：Vue 和 React 对于组件的更新粒度有什么区别？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。