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}`);

}

})

}

}

原文地址：https://www.cnblogs.com/rclw/p/12105317.html