vue设计与实现第6章 ref 响应原理笔记

ref 函数实现代码

const a = ref(1);

function ref(value){

    const wrapper = {value}

    Object.defineProperty(wrapper,'__v_isRef',{

        value: true

    })

    return reactive(wrapper)

}

　　把新建一个对象，value 属性是原始值，再把对象交给 reactive 进行响应式处理。所以要获取 ref 的值要拿取其 value 属性。这里还添加了不可遍历、配置、改写的属性 __v_isRef。标识 ref 类型。

ref 还能够用于响应式丢失问题

解构和展开运算符会让响应式数据失去响应下面是例子

const obj = reactive({ foo: 1, bar: 2 });

let { foo, bar } = obj;

const target = {

    ...obj,

};

foo = 123;

target.foo = 2;

console.log(obj);

const a = ref(1);

let { value } = a;

value = 456;

console.log(a);

　　打印结果可以看出,解构和展开的属性已经没了和原来的响应式数据的联系，如何继续保持这种联系呢？可用 toRef 和 toRefs API

toRef 代码实现

function toRef(target,key){

    const wrapper = {

        get value(){

            return Reflect.get(target,key)

        },

        set value(newvalue){

            return Reflect.set(target,key,newvalue)

        }

    }

    Object.defineProperty(wrapper,'__v_isRef',{

        value: true

    })

    return wrapper

}

　　toRef 就是把对象的某个属性转为 ref 。实现和 ref 函数差不多，只不过 ref 是把新建的对象交给 reactive 。

　　而 toRef 是改写新建的对象的 value 属性的 get 方法和 set 方法，关联上目标对象属性。

toRefs 代码实现

function toRefs(target){

    const wrapper = {}

    for (let key in target) {

        wrapper[key] = toRef(target,key);

    }return wrapper

}

　　toRefs 只是循环目标对象属性，调用 toRef

现在又有了新的问题，虽然把响应式丢失解决了，但是必须通过 value属性才能访问，例子

const obj = reactive({ foo: 1, bar: 2 });

const target = {...toRefs(obj)};

target.foo.value

解决方案，创建一个代理对象，每次取值时是 ref 类型，返回 value 属性

function proxyRefs(target){

    return new Proxy(target,{

        get (target,key,receiver) {

            const res = Reflect.get(target,key,receiver);

            return res.__v_isRef ? res.value:res

        },

        set (target,key,newVal,receiver){

            if(target[key].__v_isRef) {

                Reflect.set(target[key],value,newVal,receiver)

                return true

            }

            return Reflect.set(target,key,newVal,receiver)

        }

    })

}

　　在vue 组件中，模板能不用 value 取到值，那是因为 setup 函数返回的数据会传递给 proxyRefs 函数进行处理。

reactive 也有自动调用 proxyRefs ，例子

const count = ref(1);

const obj = reactive(count);

obj.count // 1

巴特西

vue设计与实现第6章 ref 响应原理笔记

最新文章

热门文章

巴特西

vue设计与实现 第6章 ref 响应原理 笔记

最新文章

热门文章

vue设计与实现第6章 ref 响应原理笔记