您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了Vue的響應(yīng)式更新比React快的原因,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“Vue的響應(yīng)式更新比React快的原因”這篇文章吧。
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù),Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方,所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。
前言
我們都知道 Vue 對(duì)于響應(yīng)式屬性的更新,只會(huì)精確更新依賴收集的當(dāng)前組件,而不會(huì)遞歸的去更新子組件,這也是它性能強(qiáng)大的原因之一。
例子
舉例來(lái)說(shuō) 這樣的一個(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件是一棵樹(shù),所以它的更新就是理所當(dāng)然的深度遍歷這棵樹(shù),進(jìn)行遞歸更新。本篇就從源碼的角度帶你一起分析,Vue 是怎么做到精確更新的。
React的更新粒度
而 React 在類似的場(chǎng)景下是自頂向下的進(jìn)行遞歸更新的,也就是說(shuō),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ī)制就無(wú)從下手了(你永遠(yuǎn)返回一個(gè)新的對(duì)象,我哪知道你修改了舊對(duì)象的哪部分?)
同時(shí),由于沒(méi)有響應(yīng)式的收集依賴,React 只能遞歸的把所有子組件都重新 render一遍(除了memo和shouldComponentUpdate這些優(yōu)化手段),然后再通過(guò) diff算法 決定要更新哪部分的視圖,這個(gè)遞歸的過(guò)程叫做 reconciler,聽(tīng)起來(lái)很酷,但是性能很災(zāi)難。
Vue的更新粒度
那么,Vue 這種精確的更新是怎么做的呢?其實(shí)每個(gè)組件都有自己的渲染 watcher,它掌管了當(dāng)前組件的視圖更新,但是并不會(huì)掌管 ChildComponent 的更新。
具體到源碼中,是怎么樣實(shí)現(xiàn)的呢?
在 patch 的過(guò)程中,當(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 算法來(lái)更新,本篇略過(guò)。
然后到此為止,patchVnode 就結(jié)束了,并沒(méi)有像常規(guī)思維中的那樣去遞歸的更新子組件樹(shù)。
這也就說(shuō)明了,Vue 的組件更新確實(shí)是精確到組件本身的。
如果是子組件呢?
假設(shè)列表是這樣的:
<ul> <component>1</component> <component>2</component> <component>3</component> <ul>
那么在diff的過(guò)程中,只會(huì)對(duì) component 上聲明的 props、listeners等屬性進(jìn)行更新,而不會(huì)深入到組件內(nèi)部進(jìn)行更新。
注意:不會(huì)深入到組件內(nèi)部進(jìn)行更新?。▌澲攸c(diǎn),這也是本文所說(shuō)的更新粒度的關(guān)鍵)
props的更新如何觸發(fā)重渲染?
那么有同學(xué)可能要問(wèn)了,如果不會(huì)遞歸的去對(duì)子組件更新,如果我們把 msg 這個(gè)響應(yīng)式元素通過(guò)props傳給 ChildComponent,此時(shí)它怎么更新呢?
首先,在組件初始化 props的時(shí)候,會(huì)走到 initProps 方法。
const props = vm._props = {} for (const key in propsOptions) { // 經(jīng)過(guò)一系列驗(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 的訪問(wèn)其實(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 的變化通過(guò) _props 的響應(yīng)式能力,也讓子組件重新渲染了,到目前為止,都只有真的用到了 msg 的組件被重新渲染了。
正如官網(wǎng) api 文檔中所說(shuō):
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ì)模式中叫做門(mén)面模式)
slot是怎么更新的?
注意這里也提到了一個(gè)細(xì)節(jié),也就是 插入插槽內(nèi)容的子組件:
舉例來(lái)說(shuō)
假設(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 的精確更新策略來(lái)說(shuō),子組件是不會(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é)來(lái)說(shuō),這次 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í)由于還沒(méi)有進(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ù)就沒(méi)辦法收集到依賴了。
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 } }
以上就是關(guān)于“Vue的響應(yīng)式更新比React快的原因”的內(nèi)容,如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò),勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí),若想了解更多相關(guān)知識(shí)內(nèi)容,請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。