Vue3基础(十liu)___手写 shallowRef___shallowReactive

shallowReactive

shallowReactive只将第一层变成响应式数据，改变第一层属性值页面ui会会跟着变化，第二层不会更新ui界面。

//循环第一层数据变成响应式  只有第一层被proxy添加get  set
const shallowReactive = (obj) => {
    return new Proxy(obj, {
        get(obj, key) {
            return obj[key]
        },
        set(obj, key, newVal) {
            obj[key] = newVal
            console.log("页面更新了");
            return true
        }
    })
}
let state = shallowReactive({ name: 'zjq', age: 16, habby: { habby1: '足球' } })
state.name = 'zrh'
console.log(state, '=== 1 ===');
state.habby.habby1 = "跑步" //没有触发更新
console.log(state, '=== 2 ===');

shallowRef

shallowRef我们只需要将shallowReactive复用即可：

const shallowRef = (val) => {
    return shallowReactive({ value: val })
}

//循环第一层数据变成响应式  只有第一层被proxy添加get  set
const shallowReactive = (obj) => {
    return new Proxy(obj, {
        get(obj, key) {
            return obj[key]
        },
        set(obj, key, newVal) {
            obj[key] = newVal
            console.log("页面更新了");
            return true
        }
    })
}

let state = shallowRef({ name: 'zjq', age: 16, habby: { habby1: '足球' } })
state.value.name = 'zrh'
console.log(state, '=== 1 ===');
state.value = { name: "12345" }
console.log(state, '=== 2 ===');

使用proxy对象的get、set特性，给传入的对象的第一层key都进行动态绑定，实现数据的第一层响应式~

对象

get两个参数 第一个参数：对象本身 第二个参数 对象key值
set三个参数 第一个参数：对象本身 第二个参数 对象key值 第三个参数 传入的新值

数组

get两个参数 第一个参数：数组本身 第二个参数 数组下标
set三个参数 第一个参数：数组本身 第二个参数 数组下标 第三个参数 传入的新值