某天夜晚，我在沉沉的睡梦中突然惊醒0.0，想到做了这么久Vue了，到底它是肿么帮助我实现双向绑定的呢？当我陷入了沉思之中时，困意再次来袭。。。
今天想到了这个问题，我必须对的起这个噩梦！

对于这种我不懂的问题，第一时间就是去翻看官方的api。哦吼，果然有介绍，但是呢，这些字我都认识，但是为什么就是看不懂呢。

归根到底，是因为Object.defineProperty到底是个啥我不知道。

一、Object.defineProperty是什么玩意

obj和prop都很好理解，descriptor：属性描述符就有点难理解了。其实它是一个JavaScript对象隐藏的一些属性。其中包括

configurable：（Boolean类型 ）该属性描述符是否可以改变。默认为 false。

enumerable：（Boolean类型 ）该属性描述符是否可以枚举。默认为 false。

value：（数值，对象，函数等）任何有效的 JavaScript 值，默认为 undefined。

writable：（Boolean类型 ）是否可以赋值运算，默认为 false。

get：（函数类型 ）方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象），默认为 undefined。

set：（函数类型 ）当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值，默认为 undefined。

说白了，这个object.defineProperty的方法就是一个定义和修改对象的操作，而vue主要是用到这个方法中的set和get
我们来看一下，object.defineProperty里面的set和get都做了什么。

//正常情况下定义一个对象
let testObject={id='1',name='9527'
}
console.log(testObject.name) //'9527'//如果我们用object.defineProperty
let testObject = {};
let name = '';
Object.defineProperty(testObject, 'name', {set(val) {name = val;console.log("从此你就叫", name)},get() {console.log('yes madam!');return '我是' + name + '！';}
});
//这里触发了对象的set方法，因此打印出来 ‘从此你就叫 9527’
testObject.name = '9527';
//这里触发了对象的get方法，因此打印出 
//‘yes madam!
//我是9527！’
console.log(testObject.name);

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。

二、vue如何根据setter追踪数据的变化

通过vue追踪的路径图可以看出，双向绑定在三个步骤：
1、组件渲染VMTree （Compile）。
2、object.defineProperty中的getter/setter，来进行数据劫持 (Observer)。
3、组件渲染的过程中把“接触”过的数据属性getter记录为依赖。之后当依赖项的 setter 触发时，会通知**(watcher)**，从而使它关联的组件重新渲染。

大致的思路摸清楚了，一个MVVM的框架核心点在于三个：Compile编译模板，Observer数据监听，watcher数据订阅。

• Observer监听器，监听数据，一旦数据发生变化，通知Watcher
• Watcher观察者，监测属性的变化，收到变化通知后，修改页面视图
• Compile扫描和解析每个节点的相关指令,初始化页面的数据从而初始化Watcher。
  有了 总体的思路，我们一步步来实现一个MVVM的框架。

三、动手实现一个MVVM

1、创造一个Observer监听器

//创建一个监听器
function observe(data) {if (!data || typeof data !== 'object') {return;}//轮询出对象内的属性名及属性值Object.keys(data).forEach(function (key) {defineReactive(data, key, data[key]);});
}
//定义响应
function defineReactive(data, key, val) {//如果属性内的值还是对象，继续往下轮询observe(val);//对象的属性添加getter和setterObject.defineProperty(data, key, {enumerable: true,configurable: true,get: function () {return val;},set: function (newVal) {if (val === newVal) {return;}val = newVal;console.log(key + '属性已经被监听，值为：' + newVal.toString());}});
}//初始化一个对象
let policeman = {dept: {deptName: ''},id: '',name: ''
};
observe(policeman);
policeman.dept.deptId = 'fh';//此处由于初始化的对象里没有，因此不被监听
policeman.dept.deptName = '飞虎队';//deptName属性已经被监听，值为：飞虎队
policeman.id = '9527';//id属性已经被监听，值为：9527
policeman.name = '周星星';//name属性已经被监听，值为：周星星

这样就创建了一个能够监听数据变化的监听器，下一步引入Watcher观察者，这位的作用在于，收集数据的依赖，并更新数据同时提醒数据发生变化。

2、引入Watcher观察者

在引入观察者之前，先定义一个Dept用来接收Observer传递过来的数据，并且初始化和通知观察者

//给依赖数据开辟内存
function Dept() {this.watchers = []
}//prototype方法用来给对象添加属性和方法，
//只作用在对象函数上
Dept.prototype = {//添加观察者addWatcher(watcher) {this.watchers.push(watcher)},//通知每一个观察者更新数据notify: function () {this.watchers.forEach(function (watcher) {watcher.update();        //通知每个观察者检查更新})}
};

有了存放观察者的地方了，开始创建观察者

function Watcher(vm, exp, cb) {this.vm = vm;    //指向vm的作用域this.exp = exp;  //绑定属性的key值this.cb = cb;    //闭包this.value = this.get();
}Watcher.prototype = {//数据更新update: function () {this.run();},run: function () {let value = this.vm.data[this.exp];let oldVal = this.value;if (value !== oldVal) {this.value = value;this.cb.call(this.vm, value, oldVal);}},get: function () {Dep.target = this;                   // 缓存自己let value = this.vm.data[this.exp];  // 强制执行监听器里的get函数Dep.target = null;                   // 释放自己return value;}
};

修改之前Observer的get和set方法，在里面加入Dept

function defineReactive(data, key, val) {//如果属性内的值还是对象，继续往下轮询observe(val);//添加Deptlet dept = new Dept();//对象的属性添加getter和setterObject.defineProperty(data, key, {enumerable: true,configurable: true,get: function () {//判断是否需要添加观察者if (Dep.target) {dept.addWatcher(Dep.target);}return val;},set: function (newVal) {if (val === newVal) {return;}val = newVal;console.log(key + '属性已经被监听，值为：' + newVal.toString());dept.notify(); // 如果数据变化，通知所有订阅者}});
};

这样整个数据层面的监听和观察就基本完成了，接下来研究如何实现页面数据的初始化已经编译解析。

3、dom解析器Compiler

function myMvvM(data,el,exp) {let self = this;this.data = data;//Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组Object.keys(data).forEach(function(key) {//绑定代理属性self.proxyKeys(key);     });//数据创建监听observe(data);// 初始化模板数据的值el.innerHTML = this.data[exp];  //数据创建观察者new Watcher(this,exp,function(value) {//此处是一个回调函数，如何观察到数据变化时调用，如何返回到页面el.innerHTML = value;});return this;
}myMvvM.prototype = {proxyKeys:function(key) {let self = this;Object.defineProperty(this,key,{enumerable:false,configurable:true,get:function proxyGetter() {return self.data[key];},set:function proxySetter(newVal) {self.data[key] = newVal;}});}
}

在html页面中使用myMvvM

<html>
<meta charset="utf-8"><body>
<h1 id="name"></h1>
</body><script src="mvvm/observer.js"></script>
<script src="mvvm/Watcher.js"></script>
<script src="mvvm/index.js"></script><script>//获取页面的name标签var ele = document.querySelector('#name');//<h1 id="name"></h1>var myMvvM = new myMvvM({name: 'madam!,我是周星星'}, ele, 'name');window.setTimeout(function () {console.log('模拟2s后更新数据');myMvvM.name = '工号：9527';}, 2000);
</script>
</html>

好了这样一个简单的双向绑定就实现了，但是和vue中的似乎还差了点。上面的例子中并没有涉及到，DOM的解析，而是固定了一个节点作为模拟的数据，下面来实现Compiler解析器的解析和绑定。
解析过程比较复杂，可以理解为：

• 解析模板并且替换掉模板的数据
• 将模板指令对应的节点绑定对应的更新函数，初始化相应的观察者
  步骤为：
  1、先把页面中的 DOM 暂存在DocumentFragment中
  2、编译出元素节点（v-model、v-text…）和文本节点{{message}}
  3、将编译好的内容放回到页面中

Vue模板渲染是一个很大的点，虽然在使用中不太能意识到他的存在。由于这一个方面可研究的比较多，准备再单独写一篇文章记录一下。