reactive readonly嵌套对象转换功能实现详解

 更新时间:2022年12月25日 17:28:57   作者:IamZJT_  
这篇文章主要为大家介绍了reactive readonly嵌套对象转换功能实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一、单元测试

reactive

// src/reactivity/tests/reactive.spec.ts
it('nested reactive', () => {
  const original = {
    nested: { foo: 1 },
    array: [{ bar: 2 }]
  };
  const observed = reactive(original);
  expect(isReactive(observed.nested)).toBe(true);
  expect(isReactive(observed.array)).toBe(true);
  expect(isReactive(observed.array[0])).toBe(true);
});

readonly

it('nested readonly', () => {
  const original = { foo: 1, bar: { baz: 2 } };
  const wrapped = readonly(original);
  expect(isReadonly(wrapped)).toBe(true);
  expect(isReadonly(wrapped.bar)).toBe(true);
});

二、代码实现

为什么嵌套的深层对象没有转换成reactivereadonly呢?

因为Proxy劫持的是对象本身,并不能劫持子对象的变化。

其实通过单测可以看出,我们只需要将reactive嵌套的里层对象也转换成reactive,将readonly嵌套的里层对象也转换成readonly

那只需要在get中,返回res的时候,将res转换成相应的代理就可以了。

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 (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }
    if (!isReadonly) {
      track(target, key);
    }
    return res;
  };
}

跑一下完整的单测结果看下:

ps: 其实这里需要注意的一点就是,在get中处理嵌套转换,我们只有在用到这个子对象的时候,才会将这个子对象 转换成响应时代理,避免了不必要的性能浪费。对比vue2的递归遍历defineProperty来说,也是一个优化的地方。

以上就是reactive readonly嵌套对象转换功能实现详解的详细内容,更多关于reactive readonly嵌套对象转换的资料请关注脚本之家其它相关文章!

相关文章

  • 解决echarts图表y轴数据间隔过大的问题

    解决echarts图表y轴数据间隔过大的问题

    这篇文章主要介绍了解决echarts图表y轴数据间隔过大的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue3下eslint配置方式

    vue3下eslint配置方式

    这篇文章主要介绍了vue3下eslint配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    这篇文章主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本文
    2018-08-08
  • vue3通过canvas实现图片圈选功能

    vue3通过canvas实现图片圈选功能

    这篇文章将给大家详细介绍了vue3如何通过canvas实现图片圈选功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴快来跟随小编一起学习一下吧
    2023-12-12
  • vue-router4版本第一次打开界面不匹配路由问题解决

    vue-router4版本第一次打开界面不匹配路由问题解决

    本文主要介绍了vue-router4版本第一次打开界面不匹配路由问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue实现登录时图形验证码

    vue实现登录时图形验证码

    这篇文章主要为大家详细介绍了vue实现登录时图形验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue之Vue.use的使用场景及说明

    vue之Vue.use的使用场景及说明

    这篇文章主要介绍了vue之Vue.use的使用场景,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue项目实现左滑删除功能(完整代码)

    vue项目实现左滑删除功能(完整代码)

    最近在开发移动端项目,通过向左滑动出现删除按钮,点击即可删除,怎么实现这个功能呢,接下来小编给大家带来实例代码帮助大家学习vue项目实现左滑删除功能,感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • vue3 el-table结合seamless-scroll实现表格数据滚动的思路详解

    vue3 el-table结合seamless-scroll实现表格数据滚动的思路详解

    这篇文章主要介绍了vue3 el-table结合seamless-scroll实现表格数据滚动,创建两个table,隐藏第一个table的body部分,这样就能得到一个固定的head,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • vue中引用阿里字体图标的方法

    vue中引用阿里字体图标的方法

    这篇文章主要介绍了vue中引用阿里字体图标出现错误问题的解决方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-02-02

最新评论