本文探讨了Vue3中如何通过`ref`和`reactive`处理对象的响应式问题，指出`ref`在包装对象时使用了`Object.defineProperty`和`proxy`，而`reactive`更直接利用proxy。同时强调了`ref`在插值和JS代码块中的使用差异。
首先明白vue2的Object.defineproperty，而vue3通过proxy完美解决了vue2的添加和删除无响应式的缺点。
下面是控制台打出age，看看是什么？
结果
发现 正是通过vue2的Object.defineproperty进行代理和劫持，那么ref用在对象类型会是什么结构呢？
我们发现实际上ref在包裹对象类型时采用的Object.defineproperty和proxy，当我们修改user对象的属性 。user.value拿到proxy对象后，就可以通过proxy修改属性的值了。
这里是proxy具体修改的过程
但ref在包裹对象时，每次user.value是通过object.property去拿这个proxy，多此一举，所以我们可直接通过reactive包裹对象，直接利用proxy来达到响应式！
最后值得注意： ref无论包裹对象还是基本类型在插值语法中可省略他的value，在js代码块中不可省略，reactive以上俩个地方都可省略！
知识来源
155-ref函数包裹对象实现响应式_哔哩哔哩_bilibili
156-reactive函数实现响应式_哔哩哔哩_bilibili
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
