Vue3 双向绑定原理浅入

众所周知 vue2所使用的双向绑定原理是用了Object.defineProperty 来进行数据的拦截处理，而vue3使用了es6的 proxy代理拦截数据，那么 proxy是啥呢？

菜鸟教程 ES6 Reflect 与 Proxy

proxy小试牛刀
先声明一个变量

const obj = {
	name: 'dingzong'
};

创建一个proxy实例

const _obj = new Proxy(obj, {})

输出_obj

构造函数proxy第二项是一个对象，对象里有内置十三种方法来捕获数据；
这里查看proxy第二项里对象的方法

get set方法浅试

			const _obj = new Proxy(obj, {
				get: function(target, key) {
					console.log(`当前对象的key是 ${key},输出${target[key]}`);
					return target[key]
				},
				set: function(target, key, val) {
					console.log(`当前对象的key是 ${key}, 新值是${val}`);
					target[key] = val
				}
			})

输出_obj.name时会触发get方法，
重新赋值_obj.name时触发set方法；
可以在这些方法里进行对应的操作。

当然上面的案例用Object.defineProperty也可以简单的实现，但是Object.defineProperty的设计初衷并不是为了去监听拦截一个对象中的属性（且效率也不高），且他也实现不了更加丰富的操作。