前言
我們都知道 Vue 對於響應式屬性的更新,只會精確更新依賴收集的當前組件,而不會遞歸的去更新子組件,這也是它性能強大的原因之一。
例子
舉例來說 這樣的一個組件:
<template>
<div>
{{ msg }}
<ChildComponent />
</div>
</template>
我們在觸發 this.msg = 'Hello, Changed~'
的時候,會觸發組件的更新,視圖的重新渲染。
但是 <ChildComponent />
這個組件其實是不會重新渲染的,這是 Vue 刻意而爲之的。
React的更新粒度
而 React 在類似的場景下是自頂向下的進行遞歸更新的,也就是說,React 中假如 ChildComponent
裏還有十層嵌套子元素,那麼所有層次都會遞歸的重新render(在不進行手動優化的情況下),這是性能上的災難。(因此,React 創造了Fiber
,創造了異步渲染,其實本質上是彌補被自己搞砸了的性能)。
他們能用收集依賴的這套體系嗎?不能,因爲他們遵從Immutable
的設計思想,永遠不在原對象上修改屬性,那麼基於 Object.defineProperty
或 Proxy
的響應式依賴收集機制就無從下手了(你永遠返回一個新的對象,我哪知道你修改了舊對象的哪部分?)
同時,由於沒有響應式的收集依賴,React 只能遞歸的把所有子組件都重新 render
一遍,然後再通過 diff算法
決定要更新哪部分的視圖,這個遞歸的過程叫做 reconciler
,聽起來很酷,但是性能很災難。
Vue的更新粒度
那麼,Vue 這種精確的更新是怎麼做的呢?其實每個組件都有自己的渲染 watcher
,它掌管了當前組件的視圖更新,但是並不會掌管 ChildComponent
的更新。
那麼有同學可能要問了,如果我們把 msg
這個響應式元素通過props傳給 ChildComponent
,此時它怎麼更新呢?
其實,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
的組件被重新渲染了。
這也是爲什麼我們說:Vue 的響應式更新粒度是精細到組件級別的。
正如官網 api
文檔中所說:
vm.$forceUpdate
:迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內容的子組件,而不是所有子組件。—— vm-forceUpdate文檔
我們需要知道一個小知識點,vm.$forceUpdate
本質上就是觸發了渲染watcher
的重新執行,和你去修改一個響應式的屬性觸發更新的原理是一模一樣的,它只是幫你調用了 vm._watcher.update()
(只是提供給你了一個便捷的api,在設計模式中叫做門面模式)
注意這裏也提到了一個細節,也就是 插入插槽內容的子組件:
舉例來說
假設我們有父組件parent-comp
:
<div>
<slot-comp>
<span>{{ msg }}</span>
</slot-comp>
</div>
子組件 slot-comp
:
<div>
<slot></slot>
</div>
組件中含有 slot
的更新 ,是屬於比較特殊的場景。
這裏的 msg
屬性在進行依賴收集的時候,收集到的是 arent-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 的遞歸更新,是不是還是好上很多呢?