本文共 1083 字,大约阅读时间需要 3 分钟。
变化侦测是指 如何监测到数值变化,并反映到视图上;
Angular是通过脏值检测,react是通过虚拟dom对比;vue也有自己的检测机制;
数据驱动视图,这个过程是怎么驱动的?vue怎么进行的变化侦测?
主要分为两部分:
- @监测数据(Observer)
- @更新视图-->哪些数据需要更新,哪些数据对该数据存在依赖?
关于Object的数据绑定
Object.defineProperty可以进行监测某对象,源码中的Observer类就是利用该函数进行对数据的检测;
想要新建一个对象被检测,可以new Observer({ });源码如下,defineReactive是一个函数,内部主要包含了defineProperty的过程。
之后关于依赖该对象的数据,存在一个依赖管理器,对依赖进行收集,存放在数组中,对数组进行增删改查的操作;
这样我们就可以在defineProperty中getter中进行依赖的添加,在setter中进行依赖的更新;
依赖该对象的这个对象是可以通过watcher类进行创建,这样就会通知watcher类进行更改实例
即监测到数据发生改变,会通知watcher,之后通知到依赖进行更新
defineProperty存在缺陷,只能监测到数据的获取以及设置,添加或删除的操作无法进行监测;为解决这一问题vue添加了两个全局API(vue.set,vue.delete);
关于Array的数据绑定
array本身是没有object.defineProperty的方法的,但是vue中的数据存在data{}内,getter方法是可以触发到的,只要取array,就一定会经过data;之后如何解决改变值的时候触发setter方法呢,可以通过prototype对数组的push等方法进行重写;通过重写方法造就了一个拦截器,vue内部是这样实现的;再通过把数据的__proto__属性设置上数组的那个拦截器;_ob_是一个代表这个数据已经转换为可检测的标志;
new Dep是一个依赖管理器,当数据get的时候,observe这时会把该数据加入到依赖集中,更新的时候会通知依赖可以调用依赖管理器的dep.wnotify 的方法;
当然,数组是需要深度监测的,多层嵌套的对象数组的话,会有observerArray方法,递归便利数组的每一个元素,将其变为可检测的数据;
缺点:有时候会通过下标对数组进行操作,这个时候是无法检测到的,vue新增了两个api来解决这个问题,为解决这一问题vue添加了两个全局API(vue.set,vue.delete);
转载地址:https://blog.csdn.net/zoooo_/article/details/109468505 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!