前端学习日记-手写Vue源码-响应式部分

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

}

})

}

在拿到每个属性后，通过Object.defineProperty()来对每个属性定义其get、set方法，如果前后值相同直接return;掉不做操作，如果有就打印出来更新的值

index.html