vue3:25—其他API

目录

1、shallowRef和shallowReactive

2、readonly与shallowReadonly

readonly

shallowReadonly

3、toRaw和markRaw

toRaw

markRaw 

4、customRef 


1、shallowRef和shallowReactive

shallowRef

  • 1.作用:创建一个响应式数据,但只对顶层属性进行响应式处理。
  • 2.用法:let myVar =shallowRef(initialValue);
  • 3.特点:只跟踪引用值的变化,不关心值内部的属性变化。)

shallowReactive

  • 作用:创建一个浅层响应式对象,只会使对象的最顶层属性变成响应式的,对象内部的嵌套属性则不会变成响应式的
  • 用法:const myObj=shallowReactive({...});
  • 3.特点:对象的顶层属性是响应式的,但嵌套对象的属性不是

shallowRef::只能修改第一层数据

下图代码中。changeName和changeAge不起作用

shallowReactive:只能修改第一层数据

2、readonly与shallowReadonly

readonly

  • 作用:用于创建一个对象的深只读副本,
  • 用法:
const original=reactive({...});const readOnlyCopy=readonly(original):

  • 特点:

       对象的所有嵌套属性都将变为只读。中
       任何尝试修改这个对象的操作都会被阻止(在开发模式下,还会在控制台中发出警告)中

  • 应用场景:

        创建不可变的状态快照。
        保护全局状态或配置不被修改。


shallowReadonly

1.作用:与 readonly 类似,但只作用于对象的顶层属性,
用法: 

。。。。

3、toRaw和markRaw

toRaw

1、作用:用于获取一个响应式对象的原始对象, toRaw 返回的对象不再是响应式的,不会触发视图更新。【raw:未经加工的】

官网描述:这是一个可以用于临时读取而不引起代理访问/跟踪开销,或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用,请谨慎使用。
何时使用?——在需要将响应式对象传递给非 Vue 的库或外部系统时,使用 toRaw 可以确保它们收到的是普通对象

2、具体编码:

markRaw 

作用:标记一个对象,使其永远不会变成响应式的。


例如使用 mockjs 时,为了防止误把 mockjs 变为响应式对象,可以使用 markRaw 去标记 mockjs

 

4、customRef 

封装成hooks   :useMsgRef.ts

import { customRef } from "vue"
export default function (initValue: string, delay: number) {//track:跟踪  trigger:触发const msg = customRef((track, trigger) => {return {get() {track()// 告诉Vue数据msg很重要,要对msg持续关注,一旦msg变化就去更新return initValue},set(value) {const timer = setTimeout(() => {initValue = valuetrigger()//通知Vue数据msg变化了clearTimeout(timer)}, delay);}}})return {msg}
}

使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/673170.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营第13天—二叉树02 | ● *层序遍历(对应10道题) ● *226.翻转二叉树 ● 101.对称二叉树

*层序遍历(二叉树的广度优先搜索,对应10道题) 102.二叉树的层序遍历(opens new window) 107.二叉树的层次遍历II(opens new window) 199.二叉树的右视图(opens new window) 637.二叉树的层平均值(opens new window)斜体样式 429.N叉树的层序…

Windows 安装 MySQL 最新最简教程

Windows 安装 MySQL 最新最简教程 官网地址 https://dev.mysql.com/downloads/mysql/下载 MySQL zip 文件 配置 MySQL1、解压文件 2、进入 bin 目录 搜索栏输入 cmd 回车进入命令行 C:\Users\zhong\Desktop\MySQL\mysql-8.3.0-winx64\mysql-8.3.0-winx64\bin 注意这里是你自己…

JUnit实践教程——Java的单元测试框架

前言 大家好,我是chowley,最近在学单元测试框架——JUnit,写个博客记录一下! 在软件开发中,单元测试是确保代码质量和稳定性的重要手段之一。JUnit作为Java领域最流行的单元测试框架,为开发人员提供了简单…

std::vector<cv::Mat>和unsigned char** in_pixels 互相转换

将std::vectorcv::Mat转换为unsigned char** in_pixels&#xff0c; std::vector<cv::Mat> matVector; // 假设已经有一个包含cv::Mat的vector// 创建一个二维数组&#xff0c;用于存储像素数据 unsigned char** in_pixels new unsigned char*[matVector.size()]; for …

(2)(2.14) SPL Satellite Telemetry

文章目录 前言 1 本地 Wi-Fi&#xff08;费用&#xff1a;30 美元以上&#xff0c;范围&#xff1a;室内&#xff09; 2 蜂窝电话&#xff08;费用&#xff1a;100 美元以上&#xff0c;范围&#xff1a;蜂窝电话覆盖区域&#xff09; 3 手机卫星&#xff08;费用&#xff…

JS - 处理元素滚动

业务功能中时常有元素滚动的功能&#xff0c;现在就总结一下一些常用的事件。 一、定位滚动元素 做一切滚动操作之前都应该先定位到滚动元素&#xff0c;再做其他操作&#xff0c;如滚动顶部&#xff0c;获取滚动距离、禁止滚动等。 把以下代码复制粘贴到浏览器 Console 面板…

IT行业顶级证书:助力职业生涯的制胜法宝

IT行业顶级证书&#xff1a;助力职业生涯的制胜法宝 在IT行业&#xff0c;拥有一系列高含金量的证书是事关职业生涯发展的关键。这些证书不仅是技能的象征&#xff0c;更是在激烈的市场竞争中脱颖而出的法宝。让我们一起揭晓在中国IT行业中&#xff0c;哪些证书是最具含金量的…

仰暮计划|“​爷爷说这些话的时候眼睛都红着,他那变形的脊柱和瘸拐的双腿都证明他曾为这个家付出了血汗拼尽了全力”

赴一场拾光之旅&#xff0c;集往年回忆碎片 爷爷生于1952年&#xff0c;今年已有七十一了&#xff0c;是河南焦作沁阳北金村的一位地道农民&#xff0c;劳苦一生&#xff0c;如今终于得以颐养天年。许是早年经历过于难忘&#xff0c;爷爷如今与我讲起仍是记忆犹新&#xff0c;…

百卓Smart管理平台 uploadfile.php 文件上传漏洞【CVE-2024-0939】

百卓Smart管理平台 uploadfile.php 文件上传漏洞【CVE-2024-0939】 一、 产品简介二、 漏洞概述三、 影响范围四、 复现环境五、 漏洞复现手动复现小龙验证Goby验证 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工…

uniapp 本地存储的方式

1. uniapp 本地存储的方式 在uniapp开发中&#xff0c;本地存储是一个常见的需求。本地存储可以帮助我们在客户端保存和管理数据&#xff0c;以便在应用程序中进行持久化存储。本文将介绍uniapp中本地存储的几种方式&#xff0c;以及相关的代码示例。 1.1. 介绍 在移动应用开发…

#Js篇:字符串的使用方法es5和es6

字符串 \ &#xff1a;单引号&#xff08;\u0027&#xff09;\" &#xff1a;双引号&#xff08;\u0022&#xff09; charAt 定义&#xff1a; 返回指定位置的字符&#xff0c;参数时从0开始编号的位置 参数&#xff1a; 位置下标 abc.charAt(1) // "b" …

瑞_力扣LeetCode_二叉树相关题

文章目录 说明题目 144. 二叉树的前序遍历题解 题目 94. 二叉树的中序遍历题解 题目 145. 二叉树的后序遍历题解 题目 105. 从前序与中序遍历序列构造二叉树题解 题目 106. 从中序与后序遍历序列构造二叉树题解 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《刷题》的…

【深度学习】Softmax实现手写数字识别

实训1&#xff1a;Softmax实现手写数字识别 相关知识点: numpy科学计算包&#xff0c;如向量化操作&#xff0c;广播机制等 1 任务目标 1.1 简介 本次案例中&#xff0c;你需要用python实现Softmax回归方法&#xff0c;用于MNIST手写数字数据集分类任务。你需要完成前向计算…

牛客周赛 Round 31 E.小红的子集取反【dp+设置偏移量】

原题链接&#xff1a;https://ac.nowcoder.com/acm/contest/74362/E 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 小红拿到了一个数组&#xff0c;她准备选择若干元素…

python将Word页面纸张方向设置为横向

通过python-docx的章节属性&#xff0c;就可以更改纸张方向、纸张尺寸。 import docx from docx.enum.section import WD_ORIENT from docx.shared import Cmdocument docx.Document() section document.sections[0]# 设置纸张大小为A4大小 section.page_width Cm(21) sect…

work day7

第七章 运算符重载 一、填空题 1、在下列程序的空格处填上适当的字句&#xff0c;使输出为&#xff1a;0&#xff0c;2&#xff0c;10。 #include <iostream> #include <math.h> class Magic {double x; public: Magic(double d0.00):x(fabs(d)) {} Magic operato…

2023年全国职业院校技能大赛软件测试赛题第3套

2023年全国职业院校技能大赛 软件测试赛题第3套 赛项名称&#xff1a; 软件测试 英文名称&#xff1a; Software Testing 赛项编号&#xff1a; GZ034 归属产业&#xff1a; 电子与信息大类 …

语雀·教育邮箱现在提供免费一年会员资格!

作为一位深度使用电子笔记的用户&#xff0c;我曾长期使用印象笔记&#xff0c;后来发现有道云笔记也非常适合我的需求。然而&#xff0c;我最近发现语雀和飞书等云笔记服务越来越出色。&#xff08;相比之下&#xff0c;有道云笔记的启动速度较慢&#xff0c;而且存在各种广告…

Rust 初体验1

Rust 初体验 安装 打开官网&#xff0c;下载 rustup-init.exe&#xff0c; 选择缺省模式&#xff08;1&#xff09;安装。 国内源设置 在 .Cargo 目录下新建 config 文件&#xff0c;添加如下内容&#xff1a; [source.crates-io] registry "https://github.com/rus…

【教程】微服务使用Feign接口进行远程调用的步骤

Sample 以 finance 模块 调用 exchange 模块 的 MarketService 为例。 Steps 服务提供者&#xff08;exchange&#xff09;&#xff1a;搭建接口 在 exchange-api 下&#xff0c;新建 MarketDto 和 MarketServiceFeign。并在 exchange-service 下使用 MapStruct 进行映射。…