1.Vue 数据双向绑定原理
Vue 内部通过 Object.defineProperty 方法属性拦截的方式，把 data 对象里每个数据的读写转化成 getter/setter，当数据变化时通知视图更新
2. MVVM数据的双向绑定
MVVM 数据的双向绑定主要是指，Model 数据变化 View 视图自动渲染展示；View 视图数据变化 Model 数据自动同步更新
MVVM.png
3. Object.defineProperty()
①.定义
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 ------(引自MDN)
②.语法
Object.defineProperty(obj, prop, descriptor)
（1）参数
- obj
要在其上定义属性的对象。- prop
要定义或修改的属性的名称。- descriptor
将被定义或修改的属性描述符。
（2）返回值
被传递给函数的对象。
（3）属性描述符
Object.defineProperty() 为对象定义属性，分 数据描述符 和 存取描述符 ，两种形式不能混用。
数据描述符和存取描述符均具有以下可选键值：
- configurable
当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false- enumerable
当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false
数据描述符具有以下可选键值：- value
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined- writable
当且仅当该属性的 writable 为 true 时，value才能被赋值运算符改变。默认为 false
存取描述符具有以下可选键值：- get
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined- set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined
4.简单实现案例
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
let app = document.getElementById("app")
// 声明临时存储变量
let temp = "初始数据"
// 数据监听对象
Object.defineProperty(window, "actual", {
// 监听读取数据
get() {
console.log("获取数据调用");
return temp
},
// 监听修改数据
set(value) {
console.log("修改数据调用");
temp = value
bind(actual) // 数据一旦发生变化就重新渲染页面
}
})
// vue 数据双向绑定
function bind(content) {
app.innerHTML = content
}
bind(actual)
</script>
</body>