vue3 怎么使用data里面的数据_你了解vue3.0响应式数据怎么实现吗？

从 Proxy 说起

什么是Proxy

proxy翻译过来的意思就是”代理“，ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“，返回一个新的代理对象，之后所有在Proxy中被拦截的属性，都可以定制化一些新的流程在上面，先看一个最简单的例子

const target = {}; // 要被代理的原对象// 用于描述代理过程的handlerconst handler = { get: function (target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { console.log(`setting ${key}!`); return Reflect.set(target, key, value, receiver); }}// obj就是一个被新的代理对象const obj = new Proxy(target, handler);obj.a = 1 // setting a!console.log(obj.a)// getting a!

上面的例子中我们在target对象上架设了一层handler，其中拦截了针对target的get和set，然后我们就可以在get和set中间做一些额外的操作了

注意1：对Proxy对象的赋值操作也会影响到原对象target，同时对target的操作也会影响Proxy，不过直接操作原对象的话不会触发拦截的内容~

obj.a = 1; // setting a!console.log(target.a) // 1 不会打印 "getting a!"

注意2：如果handler中没有任何拦截上的处理，那么对代理对象的操作会直接通向原对象

const target = {};const handler = {};const obj = new Proxy(target, handler);obj.a = 1;console.log(target.a) // 1

既然proxy也是一个对象，那么它就可以做为原型对象，所以我们把obj的原型指向到p