vue3 响应式原理 - proxy

最新推荐文章于 2024-05-27 10:01:44 发布

公孙元二

最新推荐文章于 2024-05-27 10:01:44 发布

阅读量560

点赞数

分类专栏： vue3 文章标签： mvc html5 vue.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Amnesiac666/article/details/120385959

版权

vue3 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

在vue2中一些无法响应式的情况在vue3中都不存在那些问题

在这里插入图片描述

在这里插入图片描述

在vue2中用Object.definedProperty实现响应式，但是只有set和get的时候有响应式，如果删除了某个对象属性或者添加某个对象的属性就无法实现响应式显示

在这里插入图片描述
vue3 响应式原理，使用了proxy

以下代码案例使用p来代理person
在这里插入图片描述
当p添加属性的时候，person也会增加属性，删除p属性，person也会被删除，不过没有发出通知(因为通知的时候可以去更新页面)

在这里插入图片描述

如果想要发出通知，可以在get的时候执行，且可以return东西出去
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
可以直接把传进来的属性值return出去

在这里插入图片描述

打印set传进来的参数：
在这里插入图片描述

在这里插入图片描述

set中需要把实际target修改一下的值，这样传什么类型进来都可以set，方法可以复用
在这里插入图片描述

在proxy中还可以使用deleteProperty的api，删除时也可以return东西出去
在这里插入图片描述

可以把删除结果直接return出去(因为删除的时候会返回布尔值)

在这里插入图片描述

新增的时候set也会被调用

在这里插入图片描述
总结

使用Proxy增删改查都可以触发通知
在这里插入图片描述

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue3 响应式原理 - proxy

在vue2中一些无法响应式的情况在vue3中都不存在那些问题在vue2中用Object.definedProperty实现响应式，但是只有set和get的时候有响应式，如果删除了某个对象属性或者添加某个对象的属性就无法实现响应式显示vue3 响应式原理，使用了proxy以下代码案例使用p来代理person当p添加属性的时候，person也会增加属性，删除p属性，person也会被删除，不过没有发出通知(因为通知的时候可以去更新页面)如果想要发出通知，可以在get的时候执行，且可以retu
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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