vue的双向绑定实现原理

vue2 主要使用了Object.defineProperty() 方法，来对数据进行劫持，数据发生改变之时，通知订阅者，监听每个属性回调执行渲染；

• Object.defineProperty() 定义新属性或修改原有的属性，返回一个对象；
• 该方法中的参数说明：

Object.defineProperty(obj, prop, descriptor)
//obj 此对象名称
//prop 需定义或修改的属性的名字
//PropertyDescription 对属性的描述

然而，属性描述内有一定的API ：

let arrVm = this._data = new MVVM({});
arrVm = this;//暂存了当前的this,方便再其他回调函数和普通函数进行辨别；
for(let i in arrVm._data){
	if(!arrVm._data.hasOwnProperty(i)) return;//非原型的私有属性
      Object.defineProperty(arrVm, i, {
		configurable:true,//可配置
		enumberable:false,//不可枚举
		get(){//获取对象的属性
			return arrVm._data[i];
		}
		set(val){//监听每个属性实行数据回调
		 	arrVm._data[i] = val;
		}
	}
}

操作流程：

1. observer : 观察数据并对数据进行劫持，使其拥有get和set得方法；
2. compile : 对数据和相关指令进行解析，绑定函数更新视图；
3. watcher : 对数据进行监听，数据发生变化，通知发布订阅者实现数据双向绑定。