我们都知道在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 可用于 进行视图更新
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
