vue3.0 Proxy 双向绑定数据 - vue

Proxy是 ES6 中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些操作。 Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）。从而可以让对象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。

let p = new Proxy(target, handler);

参数：

target: 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler: 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

p是Proxy对象，当其他操作对p进行更改的时候，会执行handler对象的方法。Proxy有13种数据劫持的操作，常用的handler处理方法

get: 读取值，

set: 获取值，

has: 判断对象是否拥有该属性，

construct: 构造函数

给个例子：

let obj = {};

let handler = {

get(target, property) {

console.log(`${property} 被读取`);

return property in target ? target[property] : 3;

set(target, property, value) {

console.log(`${property} 被设置为 ${value}`);

target[property] = value;

}

let p = new Proxy(obj, handler);

p.name = 'tom' //name 被设置为 tom

p.age; //age 被读取 3

Proxy实现数据劫持

observe(data) {

const that = this;

let handler = {

get(target, property) {

return target[property];

set(target, key, value) {

let res = Reflect.set(target, key, value);

that.subscribe[key].map(item => {

item.update();

});

return res;

}

this.$data = new Proxy(data, handler);

}

这段代码里把代理器返回的对象代理到this.$data，即this.$data是代理后的对象，外部每次对this.$data进行操作时，实际上执行的是这段代码里handler对象上的方法。