vue的响应式更新比react快的原因-mile米乐体育
这篇文章主要为大家展示了vue的响应式更新比react快的原因，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“vue的响应式更新比react快的原因”这篇文章吧。
为什么要使用vue
vue是一款友好的、多用途且高性能的javascript框架，使用vue可以创建可维护性和可测试性更强的代码库，vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的html、css、javascript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
前言
我们都知道 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 的组件被重新渲染了。
正如米乐app官网登录官网 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
有人给 vue 2.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 出两次 update twice。 这是由于子组件在执行 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 } }以上就是关于“vue的响应式更新比react快的原因”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注恰卡编程网行业资讯频道。
展开全文