vue2.0实现双向数据绑定原理

vue2.0实现双向数据绑定原理

Object.defineProperty

浏览器死循环，内存爆仓

需要对obj对象进行克隆，而在监听函数中的赋值取值操作均操作的是克隆后的对象newObj（避免死循环），因为如果操作原对象obj，这样在get方法中会读取name属性，而只要涉及到读取name属性就会被defineProperty函数监听，这样就造成了死循环。

当对obj的name属性设置值时，会触发set方法，将新值赋值给newObj的name属性同时将新值绑定到视图上，实现属性变视图变。另外需要绑定视图控件的oninput事件，当文本框中的内容发生变化时将新值赋值给obj的name属性同时又会触发监听函数，从而实现了数据的双向绑定。

vue3.0实现双向数据绑定原理

Es6 proxy

Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。这个词的原理为代理，在这里可以表示由它来“代理”某些操作，译为“代理器”。

get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

2.0中使用的是Object.defineProperty实现对属性的监听。缺点是一定要克隆一个新的对象进行操作，否则就会造成死循环。第二个缺点是如果有多个属性，那么就要定义多个Object.defineProperty去分别监听每一个属性。

3.0中使用了ES6中的新语法，用到了Proxy去实现监听，这样省去了克隆对象的步骤，同时不管有多少个属性只需要定义一次Proxy就可以实现多对象的监听，不同分别定义。