深入浅出 Vue.js 学习笔记--Object的变化侦测

本文深入探讨Vue.js中的变化侦测机制,解析如何通过中等粒度的组件状态跟踪实现高效更新。详细介绍了数据双向绑定的核心概念,包括Observer、Dep和Watcher的工作原理,以及如何解决对象属性增删的侦测问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

变化侦测

变化侦测是什么?简单来理解就是当数据发生变化时,要能侦测到并发出通知。

中等粒度

从Vue.js2.0开始,引入了虚拟DOM,将粒度调整为中等粒度,监听的状态不再是一个具体的DOM节点,而是一个组件。当组件状态发生变化后,其组件内部再使用虚拟DOM进行对比(patching算法)。这样做就可以降低依赖数量,从而降低依赖追踪所消耗的内存。

vue的数据双向绑定

vue 的数据双向绑定是基于Object.defineProperty的getter、setter方法与发布者订阅者模式实现的。而数据双向绑定流程的主要核心概念有:

1. Observer
把一个object中的所有数据(包括子数据)都转换成响应式的,可以监听到object中的所有数据。其实现的原理就是Object.defineProperty。

github源码地址:vue/src/core/observer/index.js

2. Dep
用于收集依赖、删除依赖和向依赖发送消息等。

github源码地址:vue/src/core/observer/dep.js

3. Watcher
就是所谓的依赖。只有Watcher触发的getter才会收集依赖,当数据发送变化时,就会循环列表,把所有的Watcher(一个组件中的所有依赖,和中等粒度相对应)都通知一遍。

github源码地址:vue/src/core/observer/watcher.js

核心概念之间的联系

参考书中关系图所作

首先通过Observer将object转化为getter/setter的响应式对象
当外界通过Watcher读取数据时,触发getter将Watcher添加到Dep中
数据发生变化时,触发setter,从而向Dep中的依赖(Watcher)发送通知
Watcher接到通知后向外界发送通知,渲染视图或者调用某个回调函数

存在问题

object数据的变化是通过getter/setter来追踪的,所以当给object添加属性或者删除属性时是无法侦测这个变化的,也不会向依赖发送通知。而为了解决这个问题,Vue.js提供了两个API——vm.$set和vm.$delete

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值