vue双向绑定原理

vue双向绑定原理

当一个 vue 实例被创建时,他向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性.【proxy和defineProperty的区别(下面)】
再利用 es5 特性 Object.defineProperty实现数据劫持,通过遍历 data 对象下所有属性,将其转化为 getter/setter,以便拦截对象赋值与取值操作,(//然后利用发布/订阅者模式,)调用变量实际上是调用的访问器属性，当数据发生变化后，就会调用访问器属性，调用访问器属性就会触发通知系统，vm获得通知后就对虚拟dom树进行遍历，并修改需要修改的数据，然后同步到view中，这就是mvvm或者说vue事项双向绑定的原理
所以只有当实例被创建时 data 中存在的属性才是响应式的!!!
初始化方法：(methods（方法）.components（计算属性）等)
将methods 下的所有方法进行声明.
将methods下的方法和data下的属性通过遍历和利用 es5 特性 Object.defineProperty代理到实例下.

proxy和defineProperty的区别(下面)

Object.defineProperty() 
	只能对属性进行数据劫持，不能对整个对象进行劫持，同理无法对数组进行劫持，但是我们在使用 Vue 框架中都知道，Vue 能检测到对象和数组（部分方法的操作）的变化，那它是怎么实现的呢？
	答：通过遍历数组 和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。
		兼容性好，支持 IE9
Proxy 
	可以直接监听对象而非属性、直接监听数组的变化；
	Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的
	Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；