Vue的变化侦测/响应式原理-源码讲解笔记
发布日期:2022-02-10 13:35:49 浏览次数:26 分类:技术文章

本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:报错Can‘t resolve ‘fs‘ in /Cannot read property ‘prototype‘ of undefined
下一篇:两个栈实现一个队列的数据结构 算法

发表评论

最新留言

表示我来过!
[***.240.166.169]2024年03月11日 07时04分12秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

opencv matlab编程,在Matlab中调用OpenCV函数 | 学步园 2019-04-21
c语言文件wt,c语言,wt和rt中的t是什么意思 2019-04-21
c语言运行几进制,【C语言】求已知等式在几进制条件下成立 2019-04-21
电梯运行仿真c语言代码,电梯调度算法模拟(示例代码) 2019-04-21
android组件动态接收数据库,Android开发——fragment中数据传递与刷新UI(更改控件)... 2019-04-21
云麦小米华为体脂秤怎么样_云康宝和华为智能体脂秤对比评测,实际体验告诉你哪款更好... 2019-04-21
linux 条件判断 取非_Linux awk 系列文章之 awk 多重条件判断 2019-04-21
c语言中如何将字符串的元素一个一个取出_C语言中常用的字符串操作函数 2019-04-21
2d游戏地图编辑器_王者荣耀:新版本爆料!地图编辑器“天工”即将开测,游戏怎么玩由你定!... 2019-04-21
.net framework服务启动后停止_dos命令net图文教程,start启动系统服务stop停止服务批处理脚本... 2019-04-21
8k分辨率需要多大带宽_超乎想象!用RTX3080显卡连索尼8K电视玩游戏感受如何?... 2019-04-21
win10怎么开启aptx_Win10未来的黑科技?微软SurfaceFleet大曝光 2019-04-21
creo视图管理器使用方法_学以致用之中望3D—浅谈使用中望3D的初步感受 2019-04-21
周育如的音标口诀大全_花鸟画口诀大全,实用! 2019-04-21
心电图计算心率公式_医学常用的计算公式口诀(内外妇儿),赶快收藏! 2019-04-21
select 移动端 第一个无法选中_Python爬虫微博(移动端)评论 2019-04-21
华为云welink成像是反的_华为发布智能办公神器WeLink,可连接会议室开会,还可一键遥控报销和智能翻译... 2019-04-21
唱好铁血丹心谐音正规_趙贤典:打好“感情牌” 唱好“大合唱” 2019-04-21
aix系统vi修改命令_Linux基础知识必备:利用vi编辑器创建和编辑正文文件 2019-04-21
天涯明月刀开发_玩家被天涯明月刀手游“冷落”?六大门派角色竟不带正眼看人... 2019-04-21