Vue双向数据绑定

vue双向数据绑定原理

话述

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

实现步骤

observer主要是负责对Vue数据进行数据劫持，使用数据拥有getter和setter方法
指令解析器负责绑定数据和指令，绑定试图更新方法
watcher负责数据监听，当数据发生改变通知订阅者，调用试图更新函数更新试图

object.defineProperty()的理解

·作用

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

·参数

object.defineProperty(obj,prop,descriptor)
obj要定义属性的对象。
prop要定义或修改的属性的名称。
descriptor要定义或修改的属性描述符。

代码展示

var obj = { b：“123” }
console.log(obj)
Objiect.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)