实现shallowReadonly和isProxy功能示例详解

 更新时间:2022年12月25日 17:20:04   作者:IamZJT_  
这篇文章主要为大家介绍了实现shallowReadonly和isProxy功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一、实现shallowReadonly

(一)单元测试

// src/reactivity/tests/shallowReadonly.spec.ts
import { isReadonly, shallowReadonly } from '../reactive';
describe('shallowReadonly', () => {
  it('should not make non-reactive properties reactive', () => {
    const props = shallowReadonly({ n: { foo: 1 } });
    expect(isReadonly(props)).toBe(true);
    expect(isReadonly(props.n)).toBe(false);
  });
});

shallowReadonly,浅层只读,从单测也很容易看出来。一般的应用场景,可能就是用于项目的优化,避免将深层全部转为readonly。

(二)代码实现

// src/reactivity/reactive.ts
import { mutableHandlers, readonlyHandlers, shallowReadonlyHandlers } from './baseHandlers';
export function shallowReadonly(target) {
  return createReactiveObject(target, shallowReadonlyHandlers);
}
// src/reactivity/baseHandlers.ts
import { isObject, extend } from '../shared';
function createGetter(isReadonly = false, shallow = 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);
    // + shallow,直接返回,深层不转响应式
    if (shallow) {
      return res;
    }
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }
    if (!isReadonly) {
      track(target, key);
    }
    return res;
  };
}
const shallowReadonlyGet = createGetter(true, true);
// + 其实可见shallowReadonly的set逻辑同readonly,所以从readonly那继承过来,然后改写get逻辑即可
export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
  get: shallowReadonlyGet
});

最基本的逻辑,这就完成了,单测一下。

(三)额外的单测

当然为了严谨一些,我们还是测试一下,浅层和深层的set操作的结果,是否是我们期望的。

it('should make root level properties readonly', () => {
  console.warn = jest.fn();
  const user = shallowReadonly({ age: 10 });
  user.age = 11;
  expect(console.warn).toBeCalled();
});
it('should NOT make nested properties readonly', () => {
  console.warn = jest.fn();
  const props = shallowReadonly({ n: { foo: 1 } });
  props.n.foo = 2;
  expect(props.n.foo).toBe(2);
  expect(console.warn).not.toBeCalled();
});

二、实现isProxy

这里贴上官网对isProxy的描述。

Checks if an object is a proxy created by reactive or readonly

(一)单元测试

我们只需要在之前的用例中补充断言即可。

// src/reactivity/tests/reactive.spec.ts
import { reactive, isReactive, isProxy } from '../reactive';
// reactive -> happy path
expect(isProxy(observed)).toBe(true);
// src/reactivity/tests/readonly.spec.ts
import { readonly, isReadonly, isProxy } from '../reactive';
// readonly -> happy path
expect(isProxy(wrapped)).toBe(true);

(二)代码实现

其实实现起来,我们只要复用之前的isReactiveisProxy即可。

// src/reactivity/reactive.ts
export function isProxy(value) {
  return isReactive(value) || isReadonly(value);
}

以上就是实现shallowReadonly和isProxy功能示例详解的详细内容,更多关于shallowReadonly isProxy功能的资料请关注脚本之家其它相关文章!

相关文章

  • vue3通过ref获取子组件defineExpose的数据和方法

    vue3通过ref获取子组件defineExpose的数据和方法

    defineExpose是Vue3中新增的选项,用于向父组件暴露子组件内部的属性和方法,通过defineExpose,子组件可以主动控制哪些属性和方法可以被父组件访问,本文主要介绍了vue3通过ref获取子组件defineExpose的数据和方法,需要的朋友可以参考下
    2023-10-10
  • vue-自定义组件传值的实例讲解

    vue-自定义组件传值的实例讲解

    今天小编就为大家分享一篇vue-自定义组件传值的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 前端vue uni-app cc-countdown倒计时组件使用详解

    前端vue uni-app cc-countdown倒计时组件使用详解

    cc-countdown是一个倒计时组件,它可以显示剩余时间、天数、小时数、分钟数和秒数,在本文中,我们将介绍如何在uni-app中使用cc-countdown组件,需要的朋友可以参考下
    2023-08-08
  • 示例vue 的keep-alive缓存功能的实现

    示例vue 的keep-alive缓存功能的实现

    这篇文章主要介绍了示例vue 的keep-alive缓存功能的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue指令指令大全

    Vue指令指令大全

    本文为大家介绍了VUE中内置指令包括:v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once
    2019-02-02
  • Vue.js之$emit用法案例详解

    Vue.js之$emit用法案例详解

    这篇文章主要介绍了Vue.js之$emit用法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Vue自定义Form组件实现方法介绍

    Vue自定义Form组件实现方法介绍

    这篇文章主要介绍了Vue自定义Form组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • 通过命令行生成vue项目框架的方法

    通过命令行生成vue项目框架的方法

    本篇文章主要介绍了通过命令行生成vue项目框架的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • iview实现动态表单和自定义验证时间段重叠

    iview实现动态表单和自定义验证时间段重叠

    这篇文章主要介绍了iview实现动态表单和自定义验证时间段重叠,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue指令实现OutClick的示例

    Vue指令实现OutClick的示例

    在一般业务中监听的最多的就是 Click 事件,但是在一些业务比如 Alert 和 Pop 效果时,需要监听在元素外部的点击来关闭弹窗。
    2020-11-11

最新评论