vue3 原理【详解】Proxy 实现响应式

ops/2024/9/24 17:15:51/

为了解决 vue2 的响应式缺陷 ,vue3 改用 Proxy 实现响应式

使用 Proxy 实现响应式

详见代码注释

// 仿写vue3的reactive -- 声明响应式对象
function reactive(target = {}) {//   若目标数据不是对象/数组,则直接返回 (reactive 的参数必须为对象/数组才能添加响应式if (typeof target !== "object" || target == null) {return target;}const proxyConfig = {// 访问属性 -- target 目标数据,key 属性 , receiver 处理后的数据(即objProxy)get(target, key, receiver) {// 提取出目标数据本身的属性(非原型的属性),结果为属性构成的数组const ownKeys = Reflect.ownKeys(target);// 若访问的是目标数据本身的属性if (ownKeys.includes(key)) {// 更新视图updateView();}const result = Reflect.get(target, key, receiver);// 递归调用,实现深度监听(与vue2相比提升了性能,因为只在属性被访问时,才触发深度监听,属性没被访问时,不会被监听)return reactive(result);},// 修改属性 -- target 目标数据,key 属性 ,value 新的属性值, receiver 处理后的数据(即objProxy)set(target, key, value, receiver) {// 如果新的属性值与原属性值相同,则无需处理,直接返回if (val === target[key]) {return true;}// 提取出目标数据本身的属性(非原型的属性),结果为属性构成的数组const ownKeys = Reflect.ownKeys(target);// 若修改的是目标数据本身的属性if (ownKeys.includes(key)) {// 更新视图updateView();}// 新增的属性else {// 更新视图(新增的属性,可能更新视图的逻辑不一样)updateView2();}const result = Reflect.set(target, key, value, receiver); // 如果属性只读,则返回 false。如 object.defineProperty writable falsereturn result;},// 删除属性deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key); // 如果用 delete target[key] ,则返回结果永远都是 true ,而且不是规范的函数式写法// 删除属性成功if (result) {// 更新视图updateView();}return result;},};//通过 Proxy 给目标数据添加响应式const observed = new Proxy(target, proxyConfig);return observed;
}// 测试数据
const data = {name: "朝阳",age: 35,info: {address: "成都", // 需要深度监听},nums: [10, 20, 30], // 需要深度监听
};// 得到响应式数据
const proxyData = reactive(data);

【了解即可】为什么要使用 Reflect ?

  • Reflect 的 API 和 Proxy 的 API 相同,让代码更协调一致
  • Reflect 能让编程规范化、标准化、函数式
Reflect.has(target, key)
key in targetReflect.deleteProperty(target, key)
delete target[key]
  • Reflect 会替代掉 Object 上的工具函数
Reflect.ownKeys({a: 100})
Object.getOwnPropertyNames({a: 100})

Proxy 的优势

与 vue2 的 Object.defineProperty 相比

  • 性能更好 (在访问属性时触发监听,若未访问,则不会监听)
  • 可监听属性的新增和删除
  • 可监听数组的变化

Proxy 的缺点

  • 无法兼容所有浏览器
  • 无法 polyfill

http://www.ppmy.cn/ops/40240.html

相关文章

windows窗口消息队列与消息过程处理函数

在Windows窗口应用程序中,消息队列和窗口过程函数是实现消息驱动机制的核心组件。 消息队列(Message Queue): 消息队列是用于存储窗口消息的缓冲区。当用户与应用程序交互时,系统会将生成的消息插入到消息队列中&…

基于截断傅里叶级数展开的抖动波形生成

1、背景 抖动是影响信号完整性的重要因素。随着信号速率的不断提高,抖动的影响日益显著。仿真生成抖动时钟或抖动信号,对系统极限性能验证具有重要意义。抖动是定义在时域上的概念,它表征真实跳变位置(如跳边沿或过零点)与理想跳变位…

数据库加密数据模糊匹配查询技术方案

文章目录 前言沙雕方案内存加载解密密文映射表 常规做法实现数据库加密算法参考 分词组合加密(推荐) 超神方案总结个人简介 前言 在数据安全性和查询效率之间找到平衡是许多数据管理系统所面临的挑战之一。特别是在涉及加密数据的情况下,如何…

【python量化交易】qteasy使用教程06——创建自定义因子选股交易策略

创建自定义因子选股策略 使用qteasy创建自定义因子选股交易策略开始前的准备工作本节的目标Alpha选股策略的选股思想计算选股指标用FactorSorter定义Alpha选股策略交易策略的回测结果用GeneralStg定义一个Alpha选股策略回测结果:本节回顾 使用qteasy创建自定义因子选…

数据结构--栈

什么是栈 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原则。后进先出的意思是…

2024数维杯数学建模B题生物质和煤共热解问题的研究原创论文分享

大家好,从昨天肝到现在,终于完成了2024数维杯数学建模挑战赛B题的完整论文啦。 实在精力有限,具体的讲解大家可以去讲解视频: 2024数维杯数学建模B题煤共热解每一问高质量完整代码讲解!_哔哩哔哩_bilibili 2024数维杯…

哈希表Hash table

哈希表是根据关键码的值而直接进行访问的数据结构。 数组就是⼀张哈希表。 哈希表中关键码就是数组的索引下标,然后通过下标直接访问数组中的元素,如下图所示: 那么哈希表能解决什么问题呢,一般哈希表都是用来快速判断⼀个元素是…

如何使用dockerfile文件将项目打包成镜像

要根据Dockerfile文件来打包一个Docker镜像,你需要遵循以下步骤。这里假设你已经安装了Docker环境。 1. 准备Dockerfile 确保你的Dockerfile文件已经准备就绪,并且位于你希望构建上下文的目录中。Dockerfile是一个文本文件,包含了用户可以调…