vue双向数据绑定原理

vue双向数据绑定原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者

2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

vue双向数据绑定核心是：Object.defineProperty()

Object.defineProperty() 的理解（为对象添加属性）

1、语法：

Object.defineProperty(object, propName, descriptor)

2、作用：

Object.defineProperty（）方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

备注：应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

3、参数（三个）：

• object 对象，目标对象（要定义属性的对象）
• propName 属性名 ， 添加的属性的名 ，类型：String，（要定义或修改的属性的名称）
• descriptor 属性描述 属性的特性，类型：Object，（要定义或修改的属性描述符。(这个参数是一个对象)）
• 代码示例：

    var obj = { b:"123" };
    console.log(obj);
    Object.defineProperty(obj, "a", {
    	value: 37, //属性的值
        writable: true, //是否可以被修改
        enumerable: true, //是否可以被枚举
        configurable: true //是否可以被删除
    });
    // 控制台输出
    for (let i in Object.keys(obj)) {
        console.log(i);
    }
    obj.a = "36";
    console.log(obj);   // {a: 37}

注： writable enumerable configurable默认值都是false，value不给值的情况下是undefined。

    var Book = {}
    var name = '';
    Object.defineProperty(Book, 'name', {
    	set: function (value) {  // value指当前给赋的值
         	name = value;
            console.log('你取了一个书名叫做' + value);
        },
       	get: function () {
        	return '《' + name + '》'
      	}
    })
    
    Book.name = 'vue';  // 你取了一个书名叫做vue权威指南
    console.log(Book.name);  // 《vue权威指南》

4、返回值

返回被操作的对象，即返回 obj 参数

5、同样，可以设置各种类型的属性

• 设置可写权限
• 设置可枚举权限
• 设置可删除权限

6、Object.defineProperty方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象

• value：设置属性的值
• writable：值是否可以重写。true | false
• enumerable：目标属性是否可以被枚举。true | false
• configurable：目标属性是否可以被删除或是否可以再次修改特性 true | false
• set：目标属性设置值的方法
• get：目标属性获取值的方法

---

1、Object.defineProperty() 学习地址

学习参考地址

2、vue2数据双向绑定学习

3、vue3数据双向绑定

4、Vue双向数据绑定原理解析及代码实现

5、教师整理参考

Vue的双向数据绑定原理（极简版）