vue数据驱动原理（响应式原理）

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

通常我们定义一个对象都是使用如下的方法：

var obj ={
   name:"lisi",
   age:20
}

但是这样定义对象的方式，当我们在修改对象的里的某个属性时，是无法监测到变化的，无法监测到，也就无法及时的做出更新操作。所以我们可以使用另外一种定义对象的方法：如下

	//es5中定义对象属性的另一种方法
	var obj = {};
	Object.defineProperty(obj,'name',{
		get(){
			console.log("get拦截")
		},
		set(data){//新设置的值
		  console.log("set拦截")
		  console.log(data)
		}
	})

以这种方式添加的属性，在我们访问属性时会触发get方法，当我们修改属性时，会触发set方法，set方法接收一个参数，这个参数就是我们要修改的值，我们可以在这个函数中处理我们的业务逻辑。我们可以将其简单理解为vue的数据驱动原理或者响应式原理。如果想要深入理解的话，可以参考vue官网，响应式原理这块，https://cn.vuejs.org/v2/guide/reactivity.html，

从上面的这张图中，我们也可以简单做出以下总结：

1 数据通过 Object.defineProperty 进行get set 拦截

2 通知watcher 观察者模式，订阅发布模式，触发组件重新渲染，创建新的虚拟dom（js对象模拟dom对比旧的虚拟dom，找到不同的地方，以最小的代价更新dom）

欢迎交流！