返回顶部
首页 > 资讯 > 前端开发 > JavaScript >reactivereadonly嵌套对象转换功能实现详解
  • 351
分享到

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

reactivereadonly嵌套对象转换reactivereadonly 2022-12-25 18:12:29 351人浏览 薄情痞子
摘要

目录一、单元测试Reactivereadonly二、代码实现一、单元测试 reactive // src/reactivity/tests/reactive.spec.ts it(

一、单元测试

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嵌套对象转换的资料请关注编程网其它相关文章!

--结束END--

本文标题: reactivereadonly嵌套对象转换功能实现详解

本文链接: https://lsjlt.com/news/175776.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作