constructor(options){
this.$options = 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])
})
}
取出value也就是$data中的key值,并进行循环遍历,实现数据响应化,这里重复调用this.observe(),也就是递归,目的是遍历复杂的对象
//数据响应化
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}
)
}
})
}