Vue2与Vue3实现响应式的区别

东北狍子

于 2021-11-17 17:09:50 发布

阅读量868

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/web5197/article/details/121382743

vue 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了Vue2与Vue3中响应式机制的不同实现方式。Vue2通过Object.defineProperty来监听对象变化，而Vue3则采用了Proxy代理对象的方式，提供了更全面的数据监听功能。文中还详细介绍了两种方式的具体应用。

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

Vue2 响应式 Object.defineProperty()
对象的读取使用Object.defineProperty 的get()方法
对象的修改使用Object.defineProperty 的set()方法

当实际业务中，对对象进行添加或删除时无效的，页面也不会进行响应式的修改；

Vue2想要让数组为响应式数组是需要重写数组的，需要使用到数组的处理方法;

Vue2 使用Vue.$set()实现响应式数据操作

Vue3 响应式  使用Proxy代理对象把普通对象变化为响应式对象
	new Proxy(target,handler)
		target 目标对象，想要进行操作的对象 
		handler 处理器对象，用来监听对象的变化 （内含13种监听处理方法）
		
		handler.get():读取   
		handler.set():更改 / 添加属性
		handler.deleteProperty():删除
Reflect(反射对象) 配合handler 实现Vue3的响应式
Reflect不是构造函数，无法进行new的操作，只可以使用内部的静态方法