你是如何理解Vue的响应式系统的

小鱼儿 2023-08-17 15:55 105阅读 0赞

1.响应式系统简述:  
任何一个 Vue Component 都有一个与之对应的 Watcher 实例。  
Vue 的 data 上的属性会被添加 getter 和 setter 属性。  
当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)  
data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。  
  
2.既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?  
考点: Vue的变化侦测原理  
前置知识: 依赖收集、虚拟DOM、响应式系统  
  
现代前端框架有两种方式侦测变化,一种是pull一种是push  
  
pull: 其代表为React,我们可以回忆一下React是如何侦测到变化的,  
我们通常会用setStateAPI显式更新,然后React会进行一层层的Virtual Dom Diff操作找出差异,然后Patch到DOM上,  
React从一开始就不知道到底是哪发生了变化,只是知道「有变化了」,然后再进行比较暴力的Diff操作查找「哪发生变化了」，  
另外一个代表就是Angular的脏检查操作。  
  
push: Vue的响应式系统则是push的代表,当Vue程序初始化的时候就会对数据data进行依赖的收集,  
一但数据发生变化,响应式系统就会立刻得知,因此Vue是一开始就知道是「在哪发生变化了」,  
但是这又会产生一个问题,如果你熟悉Vue的响应式系统就知道,通常一个绑定一个数据就需要一个Watcher,  
一但我们的绑定细粒度过高就会产生大量的Watcher,这会带来内存以及依赖追踪的开销,而细粒度过低会无法精准侦测变化,  
因此Vue的设计是选择中等细粒度的方案,在组件级别进行push侦测的方式,也就是那套响应式系统,通常我们会第一时间侦测到发生变化的组件,  
然后在组件内部进行Virtual Dom Diff获取更加具体的差异,而Virtual Dom Diff则是pull操作,  
Vue是push+pull结合的方式进行变化侦测的  
  
3.Vue为什么没有类似于React中shouldComponentUpdate的生命周期？  
根本原因是Vue与React的变化侦测方式有所不同  
  
React是pull的方式侦测变化,当React知道发生变化后,会使用Virtual Dom Diff进行差异检测,  
但是很多组件实际上是肯定不会发生变化的,这个时候需要用shouldComponentUpdate进行手动操作来减少diff,从而提高程序整体的性能.  
  
Vue是pull+push的方式侦测变化的,在一开始就知道那个组件发生了变化,因此在push的阶段并不需要手动控制diff,  
而组件内部采用的diff方式实际上是可以引入类似于shouldComponentUpdate相关生命周期的,但是通常合理大小的组件不会有过量的diff,手动优化的价值有限,  
因此目前Vue并没有考虑引入shouldComponentUpdate这种手动优化的生命周期

转载于:https://www.cnblogs.com/wangxi01/p/11589938.html