Vue 数据双向绑定的原理
核心：数据代理+发布订阅
- 描述： 当把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，使用Object.defineProperty把这些属性全部转为 getter/setter（数据劫持/数据映射）。在属性被访问和修改时通知变化。每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
Object.defineProperty(obj,prop,descriptor)
- obj : 要定义属性的对象
- prop:要定义或修改的属性的名称
- descriptor:要定义选项
<body>
<div id="app">
<div id="msg"></div>
<input type="text" oninput="changeVal(this)">
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let userInfo = {
name: "这个信息虽然用户看不到，但是vue可以追踪到",
}
let obj = {
}
Object.defineProperty(obj, "name", {
get() {
return userInfo.name
},
set(data) {
userInfo.name = data
document.getElementById("msg").innerHTML = data
return true
}
})
document.getElementById("msg").innerHTML = obj.name
function changeVal(eleObj) {
let value = eleObj.value
obj.name = value
return true
}
</script>