手撸vue3核心源码——响应式原理(isReactive,isReadonly)-阿里云开发者社区

手撸vue3核心源码——响应式原理(isReactive,isReadonly)

2023-08-20 47

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 手撸vue3核心源码——响应式原理(isReactive,isReadonly)

isReactive与isReadonly

isReactive和isReadonly最大区别是啥，一个可改，一个不可改而且reactive需要收集依赖，而readonly不需要，那么我们根据这点来写代码，那么我们判断一下是不是就可以了

我们首先需要把之前写的reactive以及readonly代码给优化一下

import { track, trigger } from './effect'
export function reactive(raw) {
    return new Proxy(raw, {
        get(target, key) {
            const res = Reflect.get(target, key)
            //todo收集依赖
            track(target, key)
            return res
        },
        set(target, key, value) {
            const res = Reflect.set(target, key, value)
            //todo触发依赖
            trigger(target, key)
            return res
        }
    })
}
export function readonly(raw) {
    return new Proxy(raw, {
        get(target, key) {
            const res = Reflect.get(target, key)
            return res
        },
        set(target, key, value) {
            return true
        }
    })
}

优化后

import { track, trigger } from './effect'
export function reactive(raw) {
    return new Proxy(raw, {
        get,
        set
    })
}
export function readonly(raw) {
    return new Proxy(raw, {
        get: getReadonly,
        set(target, key, value) {
            return true
        }
    })
}
const get = createGetter()
const set = createSetter()
const getReadonly = createGetter(true)
function createGetter(isReadonly = false) {
    return function get(target, key) {
        const res = Reflect.get(target, key)
        if (isReadonly) {
            return res
        }
        track(target, key)
        return res
    }
}
function createSetter() {
    return function set(target, key, value) {
        const res = Reflect.set(target, key, value)
        trigger(target, key)
        return res
    }
}

我们把get里面相同的逻辑抽出来，然后定义了一个高阶函数，来返回一个get,我们给高阶函数传的参数可以在内部做判断

因为我们的readonly与reactive在track的时候区分的很明显，那么我们是不是可以继续在get上做文章也来区分他俩，如何触发track,是不是得触发get 如何触发get 是不是得读属性，想到这里我们通过读不同的属性，我们给不同的返回值区分他俩是不是就可以了，来实现一下

function createGetter(isReadonly = false) {
    return function get(target, key) {
        const res = Reflect.get(target, key)
        if (key === reactiveFlags.IS_REACTIVE) {
            return isReadonly
        } else if (key === reactiveFlags.IS_READONLY) {
            return !isReadonly
        }
        if (isReadonly) {
            return res
        }
        track(target, key)
        return res
    }
}
function createSetter() {
    return function set(target, key, value) {
        const res = Reflect.set(target, key, value)
        trigger(target, key)
        return res
    }
}
export function isReadonly(value) {
    return value[reactiveFlags.IS_READONLY]
}
export function isReactive(value) {
    return value[reactiveFlags.IS_REACTIVE]
}

我们定义了一个枚举类，来区分reactive与readonly,当我们调用isReactive的时候我们通过读枚举项的值，也就调用了get 而读到的属性也就是key ，我们用key来区分一下，就能够得到最后的效果

解决深层嵌套

我们上面实现的isReactive与isReadonly只是在最外层实现了，没有实现深层监听, 我们看一下单测，需要将user身上的name也给监听到

编辑

这个时候我们想一下，啥情况要这样做，肯定是内部属性也是一个对象，所以我们要先判断一下是否是个对象，另外如果一环套一环的，我们是不是需要一层一层的判断，那么我们就可以用递归的方式来处理

function createGetter(isReadonly = false) {
    return function get(target, key) {
        const res = Reflect.get(target, key)
        if (res !== null && typeof res === 'object') {
            return isReadonly ? readonly(res) : reactive(res)
        }
        if (key === reactiveFlags.IS_REACTIVE) {
            return isReadonly
        } else if (key === reactiveFlags.IS_READONLY) {
            return !isReadonly
        }
        if (isReadonly) {
            return res
        }
        track(target, key)
        return res
    }
}

到此我们的深层嵌套的问题也解决了

优化代码

编辑

我们这里把相同的逻辑抽出来，并且在外层来接收函数调用，为什么不在内部，比如get: createGetter() 而是写在外面，只是因为，当我们每次调用get时函数都会被初始化一次，放在外面，他只会初始化一次，节省性能了

另外注意点，我们这样传的参数是对象当然没问题，要不是对象是不是就是undefied了，所以我们需要转转义一下

export function isReadonly(value) {
    return value[reactiveFlags.IS_READONLY]
}
export function isReactive(value) {
    return value[reactiveFlags.IS_REACTIVE]
}
javascript
复制代码
export function isReadonly(value) {
    return !!value[reactiveFlags.IS_READONLY]
}
export function isReactive(value) {
    return !!value[reactiveFlags.IS_REACTIVE]
}

这样代码就优化了一下

写在最后

vue3的源码写的很巧妙，响应式原理写的也很好，希望能够学习到这种思想在编码过程中有所收获

手撸vue3核心源码——响应式原理(isReactive,isReadonly)

isReactive与isReadonly

解决深层嵌套

优化代码

写在最后

热门文章

最新文章

相关课程

相关电子书

相关实验场景