let vm = new Vue({
el: '#app',
data: {name:"111"}
});
let obj={name:"小明"}
Object.defineProperty(obj,"name",{
get(){
console.log(1);
return 1;
},
set(val){
//设置的值为多少,参数值就为多少
console.log(2);
return 2;
}
})
console.log(obj);
- VUE的双向数据绑定的原理:当初始化vue实例时,会遍历data中的所有属性,给每一个属性新增get和set方法,当获取这个属性对应的属性值时,会默认执行get方法,设置属性的属性值时,会执行set方法;vue的指令编译器,对vue的指令进行解析,并初始化视图。并订阅观察者来更新视图,并将watcher添加到dep订阅器中,当数据发生改变,observer的set方法会被调用,会遍历dep订阅中所有的订阅者,然后更新视图
- Object.defineProperty:对obj的name属性进行监听;当获取obj的name属性对应的属性值时,会默认调用get方法;当设置obj的name属性,会默认执行set
- 当试图改变时,会触发dom监听,当dom检测到改变时会触发set函数,视图就会更新