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

简介: 手撸vue3核心源码——响应式原理(shallowReadonly, isProxy)

shallowReadonly

shallowReadonly也就是只对最外层做readonly,内部如果还要对象属性,不做readonly处理

那么我们如果是shallow的话,就不用递归了,借鉴isReaonly写法,我们也传入一个变量用于检验是否是shallow

image.png

编辑

这是我们写的单测, 最下面两行是实现的功能


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

我们知道readonly与reactive区别是readonly不做依赖收集,而shallow与readonly区别是,我们不需要再递归了,因此,我们传入一个shallow变量,当为true的时候直接返回res即可,不需要再递归将深层的对象属性也变成readonly

这样我们再创建一个shallowReadonly的方法来让它的get方法变成这样即可


const getShallowReadonly = createGetter(true, true)
export const readonlyHandler = {
    get: getReadonly,
    set(target, key, value) {
        console.warn(`${key}不能set 因为target 是readonly`, target)
        return true
    }
}
export const shallowReaonlyHandler = extend({}, readonlyHandler,
    { get: getShallowReadonly }
)

这里的extend方法是Object.assign,因为shallowReadonly与readonly的set方法一样,因此不要再写一遍set方法了


isProxy

image.png

image.png


是否是一个Proxy对象,这个很简单就可以实现,只需要判断它是否是一个reactive或者一个readonly即可

以下是readonly以及reactive要实现的单元测试

export function isProxy(value) {
    return isReactive(value) || isReadonly(value)
}

我们直接调用isReactive与isReadonly即可,如果是其中之一那就是proxy,如果不是那就不是Proxy

相关文章
|
17天前
|
存储 JavaScript 前端开发
Vue 3的响应式系统是如何工作的呢
【9月更文挑战第3天】Vue 3的响应式系统是如何工作的呢
22 4
|
17天前
|
缓存 JavaScript API
介绍一下Vue 3的响应式系统
【9月更文挑战第3天】介绍一下Vue 3的响应式系统
33 3
|
21天前
|
JavaScript 前端开发 开发者
Vue.js 响应式变革来袭!结合热点技术,探索从 Object.defineProperty 到 Proxy 的奇妙之旅,触动你的心
【8月更文挑战第30天】在 Vue.js 中,响应式系统自动追踪并更新数据变化,极大提升了开发体验。早期通过 `Object.defineProperty` 实现,但存在对新旧属性处理及数组操作的局限。Vue 3.0 引入了 `Proxy`,克服了上述限制,提供了更强大的功能和更好的性能。实践中,可根据项目需求选择合适的技术方案,并优化数据操作,利用懒加载等方式提升性能。
28 0
|
22天前
|
JavaScript 前端开发 API
揭秘Vue.js与JavaScript融合的神秘力量:如何一键解锁高效响应式Web应用的终极秘籍?
【8月更文挑战第30天】随着前端技术的发展,Vue.js凭借其轻量级、易上手和高度响应式的特性,在前端开发领域迅速崛起,成为构建现代Web应用的首选框架之一。Vue.js与JavaScript深度融合,使开发者能高效灵活地打造美观且功能强大的应用。本文将作为实战指南,带您深入了解Vue.js与JavaScript结合的奥秘,揭示构建高效响应式Web应用的秘籍。从Vue.js的基础开始,逐步介绍如何利用其数据驱动视图的特点,结合JavaScript的高级特性,如定时器、Promise、async/await等,提升应用的交互性和用户体验。
10 0
|
JavaScript 容器
【Vue源码解析】mustache模板引擎
【Vue源码解析】mustache模板引擎
51 0
|
JavaScript 前端开发
vue源码解析之mustache模板引擎
vue源码解析之mustache模板引擎
87 0
|
JavaScript
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
77 0
|
缓存 JavaScript 前端开发
Vue v-memo 指令的使用与源码解析
Vue v-memo 指令的使用与源码解析
153 0
|
JavaScript 索引
Vue $set 源码解析(保证你也能看懂)
说明这个key本来就在对象上面已经定义过了的,直接修改值就可以了,可以自动触发响应
112 0
Vue $set 源码解析(保证你也能看懂)
|
JavaScript 索引
Vue $set 源码解析
Vue $set 源码解析
95 0
Vue $set 源码解析