【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模板网!

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

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

相关文章

  • 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日
    浏览(50)
  • 计网:第四章 网络层

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

    2024年01月24日
    浏览(70)
  • 第四章 Text

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

    2024年02月06日
    浏览(46)
  • 四,Eureka 第四章

           2.3.4修改主启动类 标注为Eureka客户端           springcloud-eureka-sever-7001 springcloud-eureka-sever-7001   springcloud-eureka-sever003           5.25编写PaymentMapper接口   5.    

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

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

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

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

    2024年01月19日
    浏览(50)
  • 第四章网关

    Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等响应式编程和事件流技术开发的网关,它旨在为微服务架构提供一种简单有效的统一的 API 路由管理方式。 Gateway网关是我们服务的守门神,所有微服务的统一入口。 网关的核

    2024年02月10日
    浏览(53)
  • 第四章 数组

    可以多看几遍视频 把上课的代码,自己加加注释,在自己写之前,可以画一个流程图 照着流程图把代码自己实现一遍 不要怀疑自己,不要遇到困难就觉得自己不行,遇到困难就解决困难,编程初学者都是这样一步一步走过来的。 在指针阶段会演示整型、浮点型、字符型传递

    2024年02月12日
    浏览(46)
  • 第四章 路由基础

    目录 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日
    浏览(64)
  • 第四章 磁盘设备

    第四章 磁盘设备 一、 关于挂装的基本常识 •与 DOS/Windows 采用驱动器标识符(A:、B:、C:)使用磁 盘设备的方法不同。Linux 采用单根目录树管理全部文件系 统。磁盘设备必须挂载到系统目录树上才能使用。 (Linux 启动过程已完成对/、/ boot 和/swap 三个分区的挂装) •所谓挂

    2024年02月03日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包