vue数据绑定远原理
Posted rclw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue数据绑定远原理相关的知识，希望对你有一定的参考价值。
Object.defineProperty 数据劫持，给每个属性设置了get、set。
class myvue {
constructor(options){
this.$options = options;
// 数据响应化
this.$data = options.data;
this.observe(this.$data);
}
observe(value) {
if(!value || typeof value !== ‘object‘){
return;
}
// 遍历该对象
Object.keys(value).forEach(key => {
this.defineReactive(value, key, value[key])
})
}
defineReactive(obj, key, val) {
this.observe(val); // 递归解决数据嵌套
Object.defineProperty(obj, key, {
get(){
return val;
},
set(newVal) {
if(newVal === val) {
return;
}
val = newVal;
console.log(`${key}属性更新了：${val}`);
}
})
}
}
以上是关于vue数据绑定远原理的主要内容，如果未能解决你的问题，请参考以下文章
Vue双向绑定的实现原理系列：监听器Observer和订阅者Watcher