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中使用transition和animation的实例代码

    详解vue中使用transition和animation的实例代码

    这篇文章主要介绍了详解vue中使用transition和animation的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • vue项目打包后浏览器缓存问题及解决

    vue项目打包后浏览器缓存问题及解决

    这篇文章主要介绍了vue项目打包后浏览器缓存问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • html2canvas使用文档(vue举例)

    html2canvas使用文档(vue举例)

    html2canvas.js是一款可以在网页上实现页面截图的js,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能,这篇文章主要给大家介绍了关于html2canvas使用的相关资料,需要的朋友可以参考下
    2024-03-03
  • vue组件通信的多种方法详解

    vue组件通信的多种方法详解

    这篇文章主要为大家介绍了vue组件通信的几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue 组件开发原理与实现方法详解

    vue 组件开发原理与实现方法详解

    这篇文章主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下
    2019-11-11
  • Vue3中使用监听器的具体实践

    Vue3中使用监听器的具体实践

    监听器是Vue3中非常好用的一个特性,用于监听某个响应式变量的变化,本文就来介绍一下Vue3中使用监听器的具体实践,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 解决vue.js在编写过程中出现空格不规范报错的问题

    解决vue.js在编写过程中出现空格不规范报错的问题

    下面小编就为大家带来一篇解决vue.js在编写过程中出现空格不规范报错的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue中elementUI表单循环验证方式

    vue中elementUI表单循环验证方式

    这篇文章主要介绍了vue中elementUI表单循环验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 使用vue.js编写蓝色拼图小游戏

    使用vue.js编写蓝色拼图小游戏

    之前在网上看到《蓝色拼图》这款小游戏,作者是用jquery写的。下面通过本文给大家分享基于vue.js编写蓝色拼图小游戏,一起看看实现代码吧
    2017-03-03
  • ant-design-vue按钮样式扩展方法详解

    ant-design-vue按钮样式扩展方法详解

    这篇文章主要为大家介绍了ant-design-vue按钮样式扩展方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论