观察者:对象 用的语法:Object.defineProperty 实现方式:递归
defineProperty是es6新的对象属性,主要是观察对象中某个属性的值是否发生变化。
写一个简单的例子
let obj = {}val = newVal
let val = 3.14
Object.defineProperty(obj,'PI',{
get(){
return val
}
set(newVal){
console.log("set")
val = newVal
}
})
现在改变obj的中的PI值 obj.PI = 3.15 这时就会打印出"set"写入
假如现在有一个现成的对象,要怎么实现一个多层级的监听呢?
let obj = { name: { name: '张三' }, age: 2 };
首先涉及到多层级监听,就会想到递归,还有循环。我们需要最终实现一个函数observer(obj)来实现监听
function observer(obj){
if(obj != 'object'){
return obj
}
for (let key in obj) {
defineReactive(obj, key, obj[key]);
}
}
function defineReactive(obj,key,value){
//此处递归
observer(value)
Object.defineProperty(obj,key,{
get(){
return value
}
set(val){
//处理数据重新定义后的工作
setMessage()
value=val
}
})
}
function setMessage(){
console.log("数据更新了")
}
observer(obj)
这样改变obj里的属性就会打印“数据更新了”