数据双向绑定的三种方式

Posted 2022-02-19 yeanling

1.脏数据检查机制。使用的是angular的轮询的方式   

　　缺点：性能低，

　　好处：兼容ie8

2.数据劫持 Object.defineProperty() es5中的语法

　　这个无法被修复的，vue不支持ie678

3.proxy 方法 es6中的新语法

 proxy的方法现在用的还是很少的，详细解释一下proxy这个方法

  1.什么是Proxy？它的作用是？

    据阮一峰文章介绍：Proxy可以理解成，在目标对象之前架设一层 "拦截"，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。

  Proxy基本语法

const obj = new Proxy(target, handler);

参数说明如下：

target: 被代理对象。
handler: 是一个对象，声明了代理target的一些操作。
obj: 是被代理完成之后返回的对象。

但是当外界每次对obj进行操作时，就会执行handler对象上的一些方法。handler中常用的对象方法如下：

1. get(target, propKey, receiver)
2. set(target, propKey, value, receiver)
3. has(target, propKey)
4. construct(target, args):
5. apply(target, object, args)

 1 const target = 
 2   name: ‘kongzhi‘
 3 ;
 4 
 5 const handler = 
 6   get: function(target, key) 
 7     console.log(`$key 被读取`);
 8     return target[key];
 9   ,
10   set: function(target, key, value) 
11     console.log(`$key 被设置为 $value`);
12     target[key] = value;
13   
14 ;
15 
16 const testObj = new Proxy(target, handler);
17 
18 /*
19   获取testObj中name属性值
20   会自动执行 get函数后 打印信息：name 被读取 及输出名字 kongzhi
21 */
22 console.log(testObj.name);
23 
24 /*
25  改变target中的name属性值
26  打印信息如下： name 被设置为 111 
27 */
28 testObj.name = 111;
29 
30 console.log(target.name); // 输出 111

如上代码所示：也就是说 target是被代理的对象，handler是代理target的，那么handler上面有set和get方法，当每次打印target中的name属性值的时候会自动执行handler中get函数方法，当每次设置 target.name 属性值的时候，会自动调用 handler中的set方法，因此target对象对应的属性值会发生改变，同时改变后的 testObj对象也会发生改变。同理改变返回后 testObj对象中的属性也会改变原对象target的属性的，因为对象是引用类型的，是同一个引用的。如果这样还是不好理解的话，可以简单的看如下代码应该可以理解了：

 1 const target = 
 2   name: ‘kongzhi‘
 3 ;
 4 
 5 const testA = target;
 6 
 7 testA.name = ‘xxx‘;
 8 
 9 console.log(testA.name); // 打印 xxx
10 
11 console.log(target.name); // 打印 xxx