原理深度解析Vue的响应式更新比React快
前言
我们都知道Vue对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。
例子
举例来说这样的一个组件：
{{msg}}
我们在触发this.msg='Hello,Changed~'的时候，会触发组件的更新，视图的重新渲染。
但是
在以前的一段时间里，我曾经认为因为组件是一棵树，所以它的更新就是理所当然的深度遍历这棵树，进行递归更新。本篇就从源码的角度带你一起分析，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){
constoptions=vnode.componentOptions
//注意这个child就是ChildComponent组件的vm实例，也就是咱们平常用的this
constchild=vnode.componentInstance=oldVnode.componentInstance
updateChildComponent(
child,
options.propsData,//updatedprops
options.listeners,//updatedlisteners
vnode,//newparentvnode
options.children//newchildren
)
},
其实看传入的参数也能猜到大概了，就是做了：
- 更新props（后续详细讲）
- 更新绑定事件
- 对于slot做一些更新（后续详细讲）
如果有子节点的话，对子节点进行diff。
比如这样的场景：
- 1
- 2
- 3
要对于ul中的三个li子节点vnode利用diff算法来更新，本篇略过。
然后到此为止，patchVnode就结束了，并没有像常规思维中的那样去递归的更新子组件树。
这也就说明了，Vue的组件更新确实是精确到组件本身的。
如果是子组件呢？
假设列表是这样的：
那么在diff的过程中，只会对component上声明的props、listeners等属性进行更新，而不会深入到组件内部进行更新。
注意：不会深入到组件内部进行更新！（划重点，这也是本文所说的更新粒度的关键）
props的更新如何触发重渲染？
那么有同学可能要问了，如果不会递归的去对子组件更新，如果我们把msg这个响应式元素通过props传给ChildComponent，此时它怎么更新呢？
首先，在组件初始化props的时候，会走到initProps方法。
constprops=vm._props={}
for(constkeyinpropsOptions){
//经过一系列验证props合法性的流程后
constvalue=validateProp(key,propsOptions,propsData,vm)
//props中的字段也被定义成响应式了
defineReactive(props,key,value)
}
至此为止，是实现了对于_props上字段变更的劫持。也就是变成了响应式数据，后面我们做类似于_props.msg='Changed'的操作时（当然我们不会这样做，Vue内部会做），就会触发视图更新。
其实，msg在传给子组件的时候，会被保存在子组件实例的_props上，并且被定义成了响应式属性，而子组件的模板中对于msg的访问其实是被代理到_props.msg上去的，所以自然也能精确的收集到依赖，只要ChildComponent在模板里也读取了这个属性。
这里要注意一个细节，其实父组件发生重渲染的时候，是会重新计算子组件的props的，具体是在updateChildComponent中的：
//updateprops
if(propsData&&vm.$options.props){
toggleObserving(false)
//注意props被指向了_props
constprops=vm._props
constpropKeys=vm.$options._propKeys||[]
for(leti=0;i
那么，由于上面注释标明的那段代码，msg的变化通过_props的响应式能力，也让子组件重新渲染了，到目前为止，都只有真的用到了msg的组件被重新渲染了。
正如官网api文档中所说：
vm.$forceUpdate：迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
——vm-forceUpdate文档
我们需要知道一个小知识点，vm.$forceUpdate本质上就是触发了渲染watcher的重新执行，和你去修改一个响应式的属性触发更新的原理是一模一样的，它只是帮你调用了vm._watcher.update()（只是提供给你了一个便捷的api，在设计模式中叫做门面模式）
slot是怎么更新的？
注意这里也提到了一个细节，也就是插入插槽内容的子组件：
举例来说
假设我们有父组件parent-comp：
{{msg}}
子组件slot-comp：
组件中含有slot的更新，是属于比较特殊的场景。
这里的msg属性在进行依赖收集的时候，收集到的是parent-comp的`渲染watcher。（至于为什么，你看一下它所在的渲染上下文就懂了。）
那么我们想象msg此时更新了，
{{msg}}
这个组件在更新的时候，遇到了一个子组件slot-comp，按照Vue的精确更新策略来说，子组件是不会重新渲染的。
但是在源码内部，它做了一个判断，在执行slot-comp的prepatch这个hook的时候，会执行updateChildComponent逻辑，在这个函数内部会发现它有slot元素。
prepatch(oldVnode:MountedComponentVNode,vnode:MountedComponentVNode){
constoptions=vnode.componentOptions
//注意这个child就是slot-comp组件的vm实例，也就是咱们平常用的this
constchild=vnode.componentInstance=oldVnode.componentInstance
updateChildComponent(
child,
options.propsData,//updatedprops
options.listeners,//updatedlisteners
vnode,//newparentvnode
options.children//newchildren
)
},
在updateChildComponent内部
consthasChildren=!!(
//这玩意就是slot元素
renderChildren||//hasnewstaticslots
vm.$options._renderChildren||//hasoldstaticslots
parentVnode.data.scopedSlots||//hasnewscopedslots
vm.$scopedSlots!==emptyObject//hasoldscopedslots
)
然后下面走一个判断
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
有人给Vue2.4.2版本提了一个issue，在下面的场景下会出现bug。
letChild={
name:"child",
template:
'{{localMsg}}click ',
data:function(){
return{
localMsg:this.msg
};
},
props:{
msg:String
},
methods:{
change(){
this.$emit("update:msg","world");
}
}
};
newVue({
el:"#app",
template:'',
beforeUpdate(){
alert("updatetwice");
},
data(){
return{
msg:"hello"
};
},
components:{
Child
}
});
具体的表现是点击click按钮，会alert出两次updatetwice。这是由于子组件在执行data这个函数初始化组件的数据时，会错误的再收集一遍Dep.target（也就是渲染watcher）。
由于数据初始化的时机是beforeCreated->created之间，此时由于还没有进入子组件的渲染阶段，Dep.target还是父组件的渲染watcher。
这就导致重复收集依赖，重复触发同样的更新
怎么解决的呢？很简单，在执行data函数的前后，把Dep.target先设置为null即可，在finally中再恢复，这样响应式数据就没办法收集到依赖了。
exportfunctiongetData(data:Function,vm:Component):any{
constprevTarget=Dep.target
+Dep.target=null
try{
returndata.call(vm,vm)
}catch(e){
handleError(e,vm,`data()`)
return{}
+}finally{
+Dep.target=prevTarget
}
}
后记
如果你对于Dep.target、渲染watcher等概念还不太理解，可以看我写的一篇最简实现Vue响应式的文章，欢迎阅读：
手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码
本文也存放在我的Github博客仓库中，欢迎订阅和star。
到此这篇关于原理深度解析Vue的响应式更新比React快的文章就介绍到这了,更多相关Vue的响应式更新比React快内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。