vue2实现响应式和vue3实现响应式_问我怎么vue2项目怎么搞边上vue3一样的响应式-优快云博客

这篇博客深入探讨了Vue框架中响应式系统的实现方式，从Vue2的Object.defineProperty到Vue3的Proxy。Vue2依赖于get()和set()方法来监测和更新视图，而Vue3则利用Proxy的get(), set(), deleteProperty()方法，通过Reflect进行数据操作，提供了更强大的数据响应能力。这种变化提高了数据绑定的灵活性和性能。

vue2:

是通过Object.defineProperty中的get(),set()方法监视和修改view层实现响应式的:

		let person = {
			name: '貂蝉',
		}
		 let p = {}
		Object.defineProperty(p,'name',{
			configurable:true,
			get(){ //有人读取name时调用
				return person.name
			},
			set(value){ //有人修改name时调用
				person.name = value
			}
		})

vue3:

是通过proxy中的get(),set(),deleteProperty()来对数据进行增删改查,返回是使用Reflect

/* target: 目标对象，待要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。 */
/* handler: 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 proxy 的行为。 */ 
const proxy = new Proxy(target, handler);

		let person = {
			name: '张三',
			age: 18
		}

        const p = new Proxy(person, header)
		const handler = {
			// 拦截判断target对象是否含有属性propName的操作
			// target:目标对象
			// propName:待拦截属性名
			has(target, propName) {
				/*
				 * 做你的操作
				 */
				return propName in target
			},

			// 有人读取p的某个属性时调用
            // target:目标对象
            // propName:待拦截属性名
            // receiver: proxy实例
			get(target, propName,receiver) {
				return Reflect.get(target, propName)
			},

			// 有人修改p的某个属性、或给p追加某个属性时调用
			set(target, propName, value) {
				Reflect.set(target, propName, value)
			},
			//有人删除p的某个属性时调用
			deleteProperty(target, propName) {

				return Reflect.deleteProperty(target, propName)
			}

		}