vue双向绑定原理

官方话

vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

Object.defineProperty()方法

1、Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象）； prop （要定义或修改的属性）； descriptor （具体的改变方法） 2、简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法。当给这个属性赋值时，就调用了它里面的set方法；

示例

1
2var obj = {}
3Object.defineProperty(obj,"prototypeName",{
4	get: function() { 
5		console.log("调用了get") 
6	},
7	set: function(newValue) {
8		console.log("调用了set,新值是"+newValue)  
9	}
10})
11
12obj.prototypeName    // 调用了get
13obj.prototypeName = "hello"   // 调用了set,新值是hello
14