vue数据响应式白话版

我们都知道在vue示例中，data数据发生改变时，视图层也会发生改变，匹配更新为最新的值。

也正是因为这个系统，让我们可以脱离界面的束缚，只需要操作数据。往下看⬇⬇⬇⬇⬇

Object.defineProperty

• 这个方法，是 Vue 响应式系统的精髓，骨髓，脑髓

• 使用 Object.defineProperty 可以为对象中的每一个属性，设置 get 和 set 方法

那么 get 和 set 方法有什么用？

• get 值是一个函数，当属性被访问时，会触发 get 函数

• set 值同样是一个函数，当属性被赋值时，会触发 set 函数

举个例子

var obj={    
    name:"阿峰"
}
Object.defineProperty(obj,"name",{
    get(){        
        console.log("get 被触发")
    },
    set(val){        
        console.log("set 被触发")
    }
})

当我访问 obj.name 时，会打印 ' get 被触发

'当我为 obj.name 赋值时，obj.name = 5，会打印 ' set 被触发 '

以上面的 Vue 实例 为例

当 name 改变的时候，name 会遍历自己的 依赖收集器 subs，逐个通知 watcher，让 watcher 完成更新

这里 name 会通知 页面A，页面A 重新读取新的 name ，然后完成渲染

总结一下

• Object.defineProperty - get ，用于 依赖收集
• Object.defineProperty - set，用于 依赖更新
• 依赖收集器 subs 保存的依赖是 watcher
• watcher 可用于 进行视图更新