vue实现数据双向绑定的原理

Posted 2021-03-11 taochengyong

vue实现数据双向绑定的原理就是用Object.defineproperty()重新定义（set方法）对象设置属性值和（get方法）获取属性值的操纵来实现的

Object.property()方法的解释：Object.property(参数1，参数2，参数3)   返回值为该对象obj

其中参数1为该对象（obj），参数2为要定义或修改的对象的属性名，参数3为属性描述符，属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合使用。而get和set属于存取描述符对象的属性。

这个方法会直接在一个对象上定义一个新属性或者修改对象上的现有属性，并返回该对象

var keyvalue=1;

var obj={};

Object.defineproperty(obj,"key",{

    enumberable:true,

    configurable:true,

    set:function (newvalue) {

    keyvalue=newvalue

    console.log("keyvalue的值已经发生了改变，目前的值是:${keyvalue}")

},

    get : function () { 

    return keyvalue

}

})

对象obj获取key属性时，会触发 get方法，得到是变量keyvalue的值。当重新设置key值时，会触发set方法，将变量keyvalue的值设置成已经变换的值。如此 就实现了一个简单的数据双向绑定，当改变变量keyvalue的值的时候，obj.key也会发生改变，设置obj.key时，变量keyvalue也会改变。

vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的

实现步骤：1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者

2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图

3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者