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嵌套对象转换的资料请关注脚本之家其它相关文章!

相关文章

  • 使用vue开发移动端管理后台的注意事项

    使用vue开发移动端管理后台的注意事项

    这篇文章主要介绍了使用vue开发移动端管理后台的注意事项,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 在vue项目中集成graphql(vue-ApolloClient)

    在vue项目中集成graphql(vue-ApolloClient)

    这篇文章主要介绍了在vue项目中集成graphql(vue-ApolloClient),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈Vuex的状态管理(全家桶)

    浅谈Vuex的状态管理(全家桶)

    本篇文章主要介绍了浅谈Vuex状态管理(全家桶),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue使用Google Recaptcha验证的实现示例

    vue使用Google Recaptcha验证的实现示例

    我们最近的项目中需要使用谷歌机器人验证,所以就动手实现一下,本文就来详细的介绍一下vue Google Recaptcha验证,感兴趣的可以了解一下
    2021-08-08
  • Vue自定义指令详细

    Vue自定义指令详细

    这篇文章主要介绍了Vue自定义指令,文章从背景开始详细介绍Vue自定义指令的详细内容,随着Vue自定义指令的相关资料展开具体内容,需要的朋友可以参考一下
    2021-11-11
  • vue如何通过点击事件弹出弹窗页面详解

    vue如何通过点击事件弹出弹窗页面详解

    弹窗是我们开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了关于vue如何通过点击事件弹出弹窗页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue实现文字滚动效果

    vue实现文字滚动效果

    这篇文章主要为大家详细介绍了vue实现文字滚动效果,公告滚动播放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue遍历对象中的数组取值示例

    vue遍历对象中的数组取值示例

    今天小编就为大家分享一篇vue遍历对象中的数组取值示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 详解Vue路由传参的两种方式query和params

    详解Vue路由传参的两种方式query和params

    这篇文章主要介绍了Vue路由传参的两种方式query和params,介绍了query和params区别与总结,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue router错误跳转到首页("/")的问题及解决

    Vue router错误跳转到首页("/")的问题及解决

    这篇文章主要介绍了Vue router错误跳转到首页("/")的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论