vue数据监听原理

Posted 2020-12-14 panda-programmer

用简单代码模拟vue数据监听原理

// 核心数据响应式方法
function defineReactive(obj,key,val){
    // val可能还是个对象，需要递归一下
    objserve(val)
    Object.defineProperty(obj,key,{
        get(){
            return val
        },
        set(newVal){
            if(newVal !== val){
                val = newVal
                // 如果改变的是个对象，还需要调用一下
                objserve(newVal)
                console.log(‘set‘, newVal);
                // 在这里已经监听到了数据的变化，后续可以做一些更新视图的操作
            }
        }
    })
}
// 如果一个对象有多个属性，循环调用defineReactive，传入每一个值去进行监听
function objserve(obj){
    // 判断obj类型
    if(Object.prototype.toString.call(obj)!=="[object Object]"){
        return
    }
    Object.keys(obj).forEach(key =>defineReactive(obj,key,obj[key]))
}
// 如果给对象增加新的属性，是监听不到变化的，那么需要用set方法传入新对象，调用defineReactive手动监听一下
function set(obj,key,val){
    defineReactive(obj,key,val)
}
const obj = {foo:‘foo‘,baz:{a:1}};
objserve(obj)
obj.foo = ‘2222‘
obj.baz.a = ‘3333‘
obj.baz = {a:10} 
obj.baz.a = 100
set(obj,"dong",‘dong‘)
obj.dong = "dong1"