【Vue3源码】第五章 实现 reactive 和 readonly 嵌套对象绑定响应式

这篇具有很好参考价值的文章主要介绍了【Vue3源码】第五章 实现 reactive 和 readonly 嵌套对象绑定响应式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【Vue3源码】第五章 实现 reactive 和 readonly 嵌套对象绑定响应式

前言

上一章节我们实现了isReadonlyisReactive两个API。

还记得第一章时说的proxy无法代理嵌套对象形成响应式的问题吗?这一章我们实现 reactive 和 readonly 嵌套对象转换功能,以及shallowReadonly 和isProxy几个简单的API。

1、实现reactive和readonly嵌套对象转换功能

单元测试代码

    test("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)
    })

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

那么怎么实现呢?

实现代码

原理很简单,我们触发get捕获器时,判断传入的内容是否是个object,是个object就继续判断是reactive对象还是readonly对象,最后再递归调用一下reactive函数或者readonly函数给他的嵌套对象也绑定代理响应式。

**Reflect.get()**方法与从 对象 (target[propertyKey]) 中读取属性类似,但它是通过一个函数执行来操作的。

export function isObject (val){
  return val !== null && typeof val === 'object'
}

function createGetter(isReadonly = 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) 
    // 新增
    // 看看res是不是object
    if(isObject(res)) {
      // 如果是isReadonly 就递归调用readonly反之递归调用reactive
      return isReadonly ? readonly(res) : reactive(res)
    }

    if (!isReadonly) {
      track(target, key)
    }
    return res
  }
}

当然看下我们vue3的源码其实还有更多判断,比如symbol还有接下来马上要实现的shallow

vue3 reactive 嵌套对象,vue,javascript,开发语言,ecmascript

好了reactive和readonly嵌套对象通过所有单元测试!

2、实现 shallowReadonly 功能

Vue官网描述

vue3 reactive 嵌套对象,vue,javascript,开发语言,ecmascript

单元测试代码

新建一个shallowReadonly.spec.ts文件

import {  isReadonly,isReactive, shallowReadonly, readonly } from "../reactive";

describe("shallowReadonly", () => {
  test("should not make non-reactive properties reactive", () => {
    const props = shallowReadonly({ n: { foo: 1 } });
    const readonlyProps = readonly({ n: { foo: 1 } })
    expect(isReadonly(props)).toBe(true);
    //readonly深层的对象也是只读的
    expect(isReadonly(readonlyProps.n)).toBe(true);
    // shallowReadonly深层对象是可以set的
    expect(isReadonly(props.n)).toBe(false);
    // shallowReadonly深层对象不是响应式对象
    expect(isReactive(props.n)).toBe(false);
  });

  it("should call console.warn when set", () => {
    console.warn = jest.fn()
    const user = shallowReadonly({
      age: 10
    })
    user.age = 11
    expect(console.warn).toBeCalled()
  })
});

实现代码

原理也是非常简单

它和readonly()API唯一的区别就是只作用于浅层,不需要递归调用使嵌套对象readonly

那么我们就可以通过createGetter高阶函数,新增一个参数作为开关返回shallowReadOnly的get捕获器

进入baseHandlers.ts文件

// 把shallow开关打开
const shallowReadOnlyGet = createGetter(true,true)

function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      //get捕获器就返回true告诉调用者这是一个reactive对象
      return !isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      // 同理返回isReadonly证明是readonly
      return isReadonly
    }


    const res = Reflect.get(target, key)

    //判断shallow,如果是shallow是true的话,我们直接返回res即可,就不用去递归调用readonly了
    if (shallow) {
      return res
    }

    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res)
    }

    if (!isReadonly) {
      track(target, key)
    }
    return res
  }
}

// 导出shallowReadonly专属的shallowReadonlyHandlers
// shallowReadonlyHandlers和readonlyHandlers的set捕获器其实功能是一样的,所以只要更换get捕获器即可
export const shallowReadonlyHandlers = extend({},readonlyHandlers,{
  get:shallowReadOnlyGet
})

进入reactive.ts文件

我们引入shallowReadonlyHandlers去生成一个专属shallowReadonly的Proxy代理逻辑即可~

export const shallowReadonly = (raw) => {
    return createActiveObject(raw, shallowReadonlyHandlers)
}

shallowReadonly的单元测试也顺利通过~

3、实现 isProxy 功能

vue3 reactive 嵌套对象,vue,javascript,开发语言,ecmascript

单元测试

reactive.spec.ts

 it("happy path", () => {
        const originObj = { foo: 1 }
        const observed = reactive(originObj)
        expect(observed).not.toBe(originObj)
        expect(observed.foo).toBe(1)

        expect(isReactive(observed)).toBe(true)
        expect(isReactive(originObj)).toBe(false)
     	//新增
        expect(isProxy(observed)).toBe(true)
    })

readonly.spec.ts

it("happy path", () => {
    // not set
    const original = { foo: 1, bar: { baz: 2 } };
    const wrapped = readonly(original)
    expect(wrapped).not.toBe(original)
    expect(wrapped.foo).toBe(1)
    expect(isReadonly(wrapped)).toBe(true)
    expect(isReadonly(original)).toBe(false)
    expect(isReadonly(wrapped.bar)).toBe(true)
    expect(isReadonly(original.bar)).toBe(false)
    //新增
    expect(isProxy(wrapped)).toBe(true)
  });

代码实现

reactive.ts

export const isProxy = (value) => {
   //只要是其中之一就返回true
   return isReactive(value) || isReadonly(value)
}

通过本章的所有单元测试文章来源地址https://www.toymoban.com/news/detail-801971.html

到了这里,关于【Vue3源码】第五章 实现 reactive 和 readonly 嵌套对象绑定响应式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3技术6之toRef和toRefs、shallowReactive与shallowRef、readonly与shallowReadonly

    App.vue Demo.vue 原理: App.vue DemoTwo.vue 作用:创建一个ref对象,其value值指向另一个对象中的某个属性 语法: const name=toRef(person,‘name’) 应用:要将响应式对象中的某个属性单独提供给外部使用时 扩展: toRefs 与 toRef 功能一致,但可以批量创建多个ref 对象,语法: toRefs(perso

    2023年04月24日
    浏览(39)
  • vue3 #ref #reactive

    一、ref 函数将简单类型的数据包装为响应式数据 import { ref } from \\\'vue\\\'  const count = ref(10) 一、reactive函数将复杂类型的数据包装为响应式数据 import { reactive} from \\\'vue\\\'  const obj= reactive({     name : \\\'zs\\\',     age : 18 })

    2024年02月22日
    浏览(50)
  • Vue3 ref与reactive

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月24日
    浏览(60)
  • vue3 自动引入 ref reactive...

    npm i unplugin-auto-import -D vite.config.js Q : typescript 报错:‘reactive’ is not defined. A : TS 未识别到 vue api,没有相应的模块声明文件, 在 vite 中配置并生成 auto-imports.d.ts ,并在 tsconfig.json 中引入 vite.config.js tsconfig.json Q: eslint 无法识别报错 error ‘reactive’ is not defined no-undef A: 未配置

    2024年01月25日
    浏览(42)
  • Vue3的ref和reactive

    目录 1、ref的基本使用 2、reactive的基本使用 3、ref操作dom 4、ref与reactive的异同 ref创建数据可以是基本类型也可以是引用类型 ref函数创建响应式数据,返回值是一个对象 模版中使用ref数据,省略.value,js代码中不能省略 获取ref创建数据的值要加上.value   reactive创建响应式 reac

    2024年01月24日
    浏览(49)
  • vue3使用ref和reactive

    目录 ​​​​​​​ vue3使用ref和reactive的方法 1.ref 2.reactive Vue 3 使用 ref 和 reactive 创建响应式对象的完整示例: 1.示例 2.示例说明 vue3使用ref和reactive的方法 Vue 3引入了两个新的API, ref 和 reactive ,用于创建响应式对象。这两个方法都位于 Vue.prototype 上,因此可以在组件实例

    2024年02月08日
    浏览(49)
  • vue3-响应式基础之reactive

    reactive() 还有另一种声明响应式状态的方式,即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性: 「点击按钮+1」 「示例效果」 响应式对象是 JavaScript 代理,其行为就和普通对象一样。不同的是,Vue 能够拦截对响应式对象所有属

    2024年01月16日
    浏览(51)
  • 【Vue3响应式原理#01】Reactivity

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第一节,课程链接在此:Vue 3 Reactivity - Vue 3 Reactivity | Vue Mastery,本文档可作为课程的辅助材料,

    2024年02月08日
    浏览(40)
  • 【Vue3响应式入门#01】Reactivity

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第一节,课程链接在此:Vue 3 Reactivity - Vue 3 Reactivity | Vue Mastery,本文档可作为课程的辅助材料,

    2024年02月08日
    浏览(47)
  • Vue3 reactive丢失响应式问题

    问题描述: 使用 reactive 定义的对象,重新赋值后失去了响应式,改变值视图不会发生变化。 测试代码: 输出结果:   从上述测试代码中,ref 定义的对象有响应式,而 reactive 定义的对象失去了响应式,这是什么原因呢?官网中写到: 如果将一个对象赋值给 ref ,那么这个对

    2024年02月05日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包