vue數據監聽原理

用簡單代碼模擬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"