【Vue3源码】第四章 实现isReadonly和isReactive

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

【Vue3源码】第四章 实现isReadonly和isReactive

前言

上一章节我们实现readonly API,并且优化之前写的reactive API。这一章我们实现isReadonlyisReactive两个API。

vue3 isreadonly 判断这个页面是否可以修改,vue,前端,javascript,开发语言

1、实现isReactive

vue3 isreadonly 判断这个页面是否可以修改,vue,前端,javascript,开发语言

官网是这么介绍的:检查一个对象是否是由 reactive()shallowReactive() 创建的代理。

原理很简单我们来实现一下这个函数~

先看单元测试代码

import { reactive,isReactive } from "../reactive"


describe("reactive",() => {
    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)
    })
})

实现isReactive

isReactive的原理很简单,我们怎么判断一个对象是否是由reactive()创建的呢?

还记得上一章节中我们在get捕获器中加入的isReadonly的参数吗?

是的这个参数就可以帮我们监测对象是reactive还是readonly,如果是reactive就调用track函数触发依赖
那么isReadonly参数也可以用来判断是否是个reactive()对象

vue3 isreadonly 判断这个页面是否可以修改,vue,前端,javascript,开发语言

所以我们可以在reactive.ts文件里新增如下代码:

// 枚举
export const enum ReactiveFlags {
    IS_REACTIVE = "__v_isReactive",
}

// 传入对象后我们会去访问对象
export const isReactive = (value) => {
    return !!value[ReactiveFlags.IS_REACTIVE]
}

首先我们创建了一个枚举

枚举中我们设置一个用户基本不可能设置的key

那么我们就可以通过这个key,去访问对象中key对应的value
如果是个普通对象,访问value[ReactiveFlags.IS_REACTIVE] 自然是返回 undefined 所以直接用 !!undefined 转换成 false返回即可

那么如果是响应式对象呢?

如果是个响应式对象读取对象的值时,那么它就会先触发get捕获器

所以我们要到baseHandlers.ts文件下判断key是否是"__v_isReactive"即可

import { track, trigger } from "./effect"
import { ReactiveFlags } from "./reactive"

function createGetter(isReadonly = false) {
  return function get(target, key) {
    //如果传入的key是ReactiveFlags.IS_REACTIVE
    if (key === ReactiveFlags.IS_REACTIVE) {
      //get捕获器就返回true告诉调用者这是一个reactive对象
      return !isReadonly
    } 

    const res = Reflect.get(target, key)
    if (!isReadonly) {
      track(target, key)
    }
    return res
  }
}

这就是isReactive函数在监测不同对象时的流程图:

vue3 isreadonly 判断这个页面是否可以修改,vue,前端,javascript,开发语言

2、实现isReadonly

其实是同理的直接上代码了

reactive.ts

export const enum ReactiveFlags {
    IS_REACTIVE = "__v_isReactive",
    IS_READONLY = "__v_isReadonly"
}

export const isReactive = (value) => {
    return !!value[ReactiveFlags.IS_REACTIVE]
}

export const isReadonly = (value) => {
    return !!value[ReactiveFlags.IS_READONLY]
}

baseHandlers.ts

import { ReactiveFlags } from "./reactive"

function createGetter(isReadonly = 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)
    if (!isReadonly) {
      track(target, key)
    }
    return res
  }
}

流程图:
vue3 isreadonly 判断这个页面是否可以修改,vue,前端,javascript,开发语言
下节预告《vue3源码 优化stop功能》文章来源地址https://www.toymoban.com/news/detail-806158.html

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

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

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

相关文章

  • 第四章 Text

    在本章中,您将学习如何在页面上绘制文本。 绘图文本是 PDF 图形中最复杂的部分,但它也是帮助 PDF 击败竞争对手成为当今国际标准的原因。 当其他原始播放器将文本转换为光栅图像或矢量路径(以保持视觉完整性)时,PDF 的发明者知道用户需要可以搜索和复制的文本,而

    2024年02月06日
    浏览(50)
  • 计网:第四章 网络层

    基于湖科大教书匠b站计算机网络教学视频以及本校课程老师ppt 整合出的计算机网络学习笔记 根据文章目录,具体内容都在附赠的pdf文件中,适合日常学习、考前冲刺 一下是第四章笔记中大概的知识点内容,欢迎查漏补缺^^ 可以在电脑网页端进行下载哦~ 目录 1.网络层概述

    2024年01月24日
    浏览(73)
  • 第四章 路由基础

    目录 4.1 路由器概述 4.1.1 路由器定义 4.1.2 路由器工作原理 4.1.3 路由表的生成方式 (1)直连路由 (2)静态路由 (3)动态路由 4.1.4 路由器的接口 (1)配置接口 (2)局域网接口 (3)广域网接口 4.1.5 路由器的硬件连接 (1)局域网线缆:双绞线 (2)广域网接口 (3)配置专

    2024年02月08日
    浏览(67)
  • 第四章 单例模式

    代码示例 优缺点:可能会造成内存的浪费,但也只能浪费内存 代码示例 代码示例 缺点:多线程不安全 缺点效率太低 在类加载时,静态内部类没有调用是不会进行类加载的,当被调用时才会被加载,而且只加载一次,加载时线程安全 优缺点

    2023年04月21日
    浏览(60)
  • 第四章-边界安全

    1)什么是防火墙 墙,始于防,忠于守。从古至今,墙予人以安全之意。 防御外网对内网的入侵 防火墙是一种 网络安全设备或系统 ,用于监控和控制网络流量,防止未经授权的访问和攻击。防火墙可以根据预定的规则和策略,过滤入站和出站数据包,保护网络的安全性和完

    2024年01月19日
    浏览(53)
  • 第四章 RPC 调用

    通过以上案例我们发现,Http请求调用服务实例属实过于麻烦。其实对于请求同一个服务,很多步骤都是相同的,例如:服务名,地址,httpClient 创建步骤等。 RPC的出现,就是为了解决这一问题。 RPC: 即我们常说的远程过程调用,就是像调用本地方法一样调用远程方法,通信协

    2024年02月04日
    浏览(53)
  • Linux第四章

    ctrl+c :强制停止(Linux某些程序的运行;命令输入错误) ctrl+d :退出或登出(退出账户的登录;或者退出某些特定程序的专属页面) history :查看历史输入过的命令(!命令前缀,自动执行上一次匹配前缀的命令,不能搜索太久的) ctrl+r :输入内容去匹配历史命令(如果搜索到的内

    2024年02月01日
    浏览(47)
  • linux第四章(网络)

    在配置前首先查看本机的ensXX信息:cat ens160.nmconnection 看本机配置:cd /etc/NetworkManager/                       cd  system-connextions/    ls 一。接口管理命令:ip命令/nmcli命令/nmtui命令 1.对IP地址进行操作: ip的命令: IP link:显示网络设备的运行状态 ip -s show ens160:查看设备(en

    2024年01月19日
    浏览(52)
  • 第四章 搜索功能

    指定返回的字段 在ES中,通过_source子句可以设定返回结果的字段。_source指向一个JSON数组,数组中的元素是希望返回的字段名称。 例如,通过source指定查询字段 结果计数 给前端传递搜索匹配结果的文档条数,即需要对搜索结果进行计数。ES提供了_count API功能,在该API中,用

    2023年04月08日
    浏览(42)
  • 第四章,登录注册

    目录 4.1 添加注册页面 4.2 注册表单验证 4.3提交注册信息 4.4 完善注册功能

    2024年02月12日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包