【vue3学习笔记】(第144-146节)reactive函数;回顾vue2响应式原理;vue3响应式原理_proxy

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

本篇内容对应课程第144-143节

课程 P144节 《reactive函数》笔记

验证 reactive 只能处理对象类型数据,不能处理基本类型数据:当使用reactive处理一个基本类型数据时,控制台直接报出了警告:reactive不能处理基本类型数据。

使用reactive定义对象类型数据,打印被reactive加工后的数据,发现原来的对象被reactive加工成了一个Proxy对象:

对比之前用ref加工的对象类型数据,是一个 RefImpl 对象,里面的 value 属性是一个Proxy对象。ref在处理对象类型数据时,内部仍然是借助了 reactive 。

验证 reactive 加工后的对象类型数据是否是深层次响应式的:结论是是深层次响应式的。

验证 reactive 处理数组类型数据:发现可以直接通过数组索引去修改数据,且页面也可以捕获到数据的修改并更新视图。这在vue2中是不行的,需要借助一个方法 Vue.set 或 this.$set 来实现。

总结:

课程 P145节 《回顾vue2的响应式原理》笔记

先来回顾一下vue2中的响应式原理:

对象类型:通过 Object.defineProperty() 对属性的读取、修改进行拦截,也就是数据劫持。数据劫持是 响应式的根基,只有劫持到数据的改变,才可能实现响应式。

数组类型:当你调用数组的push方法时,其实调用的是vue经过二次封装的push方法,在这个方法里,vue做了两件事:一是帮你去正常地调用数组的push方法,二是去更新界面。

在vue2中,直接给对象数据添加一个属性,以及删除一个已有属性,可以看到数据可以修改成功,但vue2监测不到数据的改变,不会进行视图更新。

只能通过 this.$set 或Vue.set 的形式去实现数据修改的同时更新视图。

在vue2中,通过数组下标的方式修改数组某一项的值,同样是数据已经改变但视图不会更新。通过 this.$set 或Vue.set 的方式或者调用数组的更新方法 splice 方法来达到更新视图的目的。

课程 P146节 《vue3响应式原理》笔记

在vue3中,给响应式数据增加一个属性或删除一个已有属性,以及通过下标方式修改数组某一项(之前reactive一节已验证)数据都可以实现响应式,页面会更新。

模拟vue2中实现响应式:

通过对象p修改属性,发现可以被监测到:


通过p对象添加一个属性,会发现新添加的属性与原有属性不同,它没有对应的getter和setter,只是一个普通的属性。

通过p对象删除一个属性name,发现返回了一个false,同时发现p上面的name属性还在:

删不掉的原因是,在Object.defineProperty 中的配置中,没有加入 configurable:true :

模拟vue3中实现响应式:通过 new Proxy 得到一个代理对象,它接收两个参数,第一个为源对象,第二个参数是配置对象,如果不写任何配置,也必须要传递一个空对象,不允许不传递第二个参数:

输出代理对象p,可以看到它拥有与源对象相同的属性与值:

通过p对象修改、添加和删除属性,会发现源对象person上的相应属性也会被修改:

为了让修改数据时可以被监测到,我们在 new Proxy 的第二个参数配置对象中添加一些配置:get函数和set函数:

此时再次通过p对象修改属性,可以被监测到了:

为了使删除属性时也被监测到,增加 deleteProperty 配置,在这个配置中,需要用 delete 关键字真正删掉操作删除的属性:

测试删除属性:当删除p身上的name后,删除的动作被监测到了,同时 person 和 p 身上的name属性都被删除掉了。删除语句执行后返回了一个false:

这是因为绿色框的代码, deleteProperty 方法没有返回值,相当于返回了 undefined,也就是 false:

给 deleteProperty 方法设置返回值:

此时再次执行删除属性操作,就会返回删除结果了,如果删除成功,则返回true,如果删除失败,则返回false:

测试追加属性:通过 p 给 person 追加一个属性 sex,发现也能被set拦截捕获到:

如此,我们知道,Proxy中第二个参数配置对象中配置的get方法,是在读取p的属性时被拦截捕获;set方法,是在修改p的属性、或给p新增属性时被拦截捕获;而 deleteProperty 则是删除 p 的属性时被拦截捕获:

相关推荐
im_AMBER10 分钟前
学习日志19 python
python·学习
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen5 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
超浪的晨5 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
使二颗心免于哀伤7 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
悠哉悠哉愿意7 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮7 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2747 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
岩中竹8 小时前
广东省省考备考——常识:科技常识(持续更新)
笔记
★YUI★8 小时前
学习游戏制作记录(剑投掷技能)7.26
学习·游戏·unity·c#