vue3中手寫shallowReactive, shallowRef（系列十三）

function shallowRef(val) {
    return shallowReactive({value:val});
}

function shallowReactive(obj) {
    return new Proxy(obj, {
        get(obj, key){
            return obj[key];
        },
        set(obj, key, val){
            obj[key] = val;
            console.log('更新UI界面');
            return true;
        }
    })
}
let obj = {
    a:'a',
    gf:{
        b:'b',
        f:{
            c:'c',
            s:{
                d:'d'
            }
        }
    }
};
/*
let state = shallowReactive(obj);

//只有最外層的a屬性變化，才會觸發視圖更新
// state.a = '1';
state.gf.b = '2';
state.gf.f.c = '3';
state.gf.f.s.d = '4';
 */
let state = shallowRef(obj);

// state.value.a = '1';
// state.value.gf.b = '2';
// state.value.gf.f.c = '3';
// state.value.gf.f.s.d = '4';
// ref的最外層屬性value,只有它改變，視圖才會跟新
state.value = {
    a:1,
    gf:{
        b:2,
        f:{
            c:3,
            s:{
                d:4
            }
        }
    }
}