「1分钟--前端01」vue双向绑定

vue双向绑定.png

---

目录

⊙常见双向绑定的实现方法

⊙基于数据劫持双向绑定的优点

⊙基于Object.defineProperty双向绑定的两个缺点

⊙Proxy实现双向绑定的特点

---

一.常见双向绑定的方法

1.KnockoutJS基于观察者模式的双向绑定；

2.Ember基于数据模型；

3.Angular基于脏检查的双向绑定，使用主动遍历

4.基于数据劫持的双向绑定

(1)Vue现在使用的Object.defineProperty

(2)ES6新增的Proxy，尤大也说Vue3.0换成这个了。

---

二.数据劫持的优点

1.无需显示调用

data.name = '悬笔e绝';就能直接触发变更

不用像react使用setState显示调用；

2.精确得到变化数据

劫持属性的setter，变化时可以得到newVal；

否则只知道数据变了，具体需要大量的diff才能找出变化值

---

三.Object.defineProperty的缺点

1.无法监听数组的变化

根本原因：数组没有setter和getter

因为数组的长度不确定，可能会很大，出于性能考虑就没有setter和getter。

注：vue文档说可以检测数组变化，其实是使用了奇技淫巧，

感兴趣的话，我之后再补充。

2.只能劫持对象的属性

我们需要对每个对象的每个属性进行遍历，如果属性值也是对象，就要深度遍历了。

所以下面要放大招了~

---

四.Proxy的特点

严格讲proxy叫做代理，提供了一种机制能对外界访问进行过滤和改写，简单理解Proxy是Object.defineProperty的全方位加强版

优点

（1）直接监听整个对象，而不是属性

（2）可以监听数组的变化

（3）Proxy有多达13种拦截方法，很多都是Object.defineProperty不具备的。

（4）返回一个新的对象，不是像Object.defineProperty那样直接修改对象属性；符合immortal思想；

（5）新标准的性能红利，会受到浏览器厂商重点持续的心性能优化

缺点

兼容性问题，且无法用polyfill磨平，所以尤大才说要等到大版本3.0再用Proxy重写了。

---

PS:前端程序员一枚，热爱分享web技术，新媒体音视频，航拍摄影知识；公众号“悬笔e绝”