Vue双向绑定原理

<div id="box"></div>

//例如:我们在vue中定义一个a数据数据
function data() {
     return {
           a: 10
     }
}

let d = data()   //这样就可以通过d.a访问数据,d.a = 20 从新给数据赋值

//Object.defineProperty 用来定义对象数据,有三个参数
//第一个参数：必需。目标对象   这里就是d
//第二个参数：必需。需定义或修改的属性的名字   这里就是a
/*第三个参数：必需。目标属性所拥有的特性,这里有一个get和set方法,get方法会在获取数据的时候触发
例如d.a访问数据,set方法是更改值的时候触发,例如d.a = 20 就会触发set,这里会接受一个参数,为更新的值,在这里使用innerHTML给dom节点进行更新,达到数据和视图同步的效果 */

Object.defineProperty(d, 'a', {
    set(v) {
         console.log('给d对象的a属性改变值的时候触发,形参v是更改的值');
         box.innerHTML = v
     },
     get() {
         console.log('获取d的a属性的时候触发 d.a');
         return box.innerHTML
         //不能返回 d.a  因为d.a触发get,返回d.a   就会触发get死循环
     }
})