双向数据绑定

Vue核心：

1. 响应式的数据绑定
2. 组件化

Vue三要素：

1. 响应式：例如如何监听数据变化，其中的实现方法就是我们提到的双向绑定。
2. 模版引擎：如何解析模版。
3. 渲染：Vue如何将监听到的数据变化和解析后的HTML进行渲染。

可以实现双向绑定的方法有很多，KnockoutJS基于观察着模式（发布-订阅）的双向绑定，Ember基于数据模型的双向绑定，Angular基于脏检查的双向绑定。我们常见的是基于数据劫持的双向绑定。

常见的基于数据劫持的双向绑定有两种实现，一个是目前Vue在用的Object.defineProperty，另一个是ES2015中新增的Proxy。

基于数据劫持实现的双向绑定的特点

数据劫持我们通常利用Object.defineProperty劫持对象的访问器，在属性值发生改变时，可以获取变化然后进一步操作。

// 这是将要被劫持的对象
const data = {
  name: '',
};

function say(name) {
  if (name === '古天乐') {
    console.log('给大家推荐一款超好玩的游戏');
  } else if (name === '渣渣辉') {
    console.log('戏我演过很多,可游戏我只玩贪玩懒月');
  } else {
    console.log('来做我的兄弟');
  }
}

// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('get');
    },
    set: function(newVal) {
      // 当属性值发生变化时我们可以进行额外操作
      console.log(`大家好,我系${newVal}`);
      say(newVal);
    },
  });
});

data.name = '渣渣辉';
//大家好,我系渣渣辉
//戏我演过很多,可游戏我只玩贪玩懒月

数据劫持的优势

1. 无需显示调用：例如Vue运用数据劫持+发布订阅，直接可以通知变化并驱动视图。
2. 可精确得知变化数据：劫持setter，当属性值改变，我们可以精确获知变化的内容，因此在这部分不需要额外的diff操作，否则我们只知道数据发生了变化而不知道具体哪些数据变化了，这个时候需要大量diff来找出变化值，这是额外性能损耗。

数据劫持双向绑定的实现思路

1. 利用Proxy或Object.defineProperty生成的Observer针对对象/对象的属性进行“劫持”，在属性发生变化后通知订阅器。
2. 解析器Compile解析模板中的Directive(指令)，收集指令所依赖的方法和数据，等待数据变化后进行渲染。
3. Watcher属于Observer和Compile桥梁，它将接收到的Observer产生的数据变化，并根据Compile提供的指令进行视图渲染，使得数据变化促使视图变化。

基于Object.defineProperty双向绑定的特点

一个极简的双向绑定

const obj = {};
Object.defineProperty(obj, 'text', {
	get: function() {
		console.log('get val');
	},
	set: function(newVal) {
		console.log('set val:' + newVal);
		document.getElementById('input').value = newVal;
		document.getElementById('span').innerHTML = newVal;	
	}
});
const input = document.getElementById('input');
input.addEventListener('keyup',function(e){
	obj.text = e.target.value;
})