vue3 响应式api中特殊的api

在这里插入图片描述

系列文章目录

TypeScript 从入门到进阶专栏

文章目录

  • 系列文章目录
  • 一、shallowRef()
  • 二、triggerRef()
  • 三、customRef()
  • 四、shallowReactive()
  • 五、shallowReadonly()
  • 六、toRaw()
  • 七、markRaw()
  • 八、effectScope()
  • 九、getCurrentScope()


一、shallowRef()

shallowRef()是一个新的响应式API,用于创建一个浅层的响应式引用。它类似于ref(),但有一个重要的区别:当shallowRef()包装的对象发生变化时,它不会递归地对其进行响应式处理。

具体来说,shallowRef()内部使用了一个Proxy,当访问shallowRef()包装的对象属性时,会触发响应式。但如果修改对象的属性,只会触发浅层的响应式,不会对对象的内部属性进行递归处理。

这样的设计可以提高性能,因为对于大型的复杂对象,如果每次属性变化都进行递归的响应式处理,会带来很大的性能开销。而使用shallowRef()可以选择性地对对象的某些属性进行响应式处理。

使用shallowRef()的示例如下:

import { shallowRef } from 'vue';const obj = {name: 'John',age: 25,address: {city: 'New York',country: 'USA'}
};const refObj = shallowRef(obj);console.log(refObj.value.name); // JohnrefObj.value.age = 30;
console.log(obj.age); // 30,修改refObj的属性,会影响到原始对象refObj.value.address.city = 'Los Angeles';
console.log(obj.address.city); // 'Los Angeles',修改refObj的属性,不会递归地对内部对象进行响应式处理

需要注意的是,shallowRef()只能包装对象或数组,如果尝试包装一个基本类型的值(如字符串、数字等),将会抛出警告。

二、triggerRef()

triggerRef() 是 Vue 3 中的一个函数,它用于触发一个 ref 重新响应(即重新执行计算)

在 Vue 3 中,refreactive 是用于响应式数据的两个主要 API。ref 用于创建一个包装了基本类型值的响应式对象,而 reactive 用于创建一个包装了 JavaScript 对象的响应式对象。

当我们使用 ref 创建一个响应式对象时,我们可以通过 .value 属性来访问和修改该对象的值。而 triggerRef() 函数可以用于手动触发一个 ref 的重新响应,即重新执行 ref 的计算函数,更新 ref 的值。

以下是 triggerRef() 函数的用法示例:

import { ref, triggerRef } from 'vue';const count = ref(0);function increaseCount() {count.value++;
}// 手动触发 ref 重新响应
triggerRef(count);console.log(count.value); // 输出:1

在上面的示例中,我们通过 triggerRef(count) 手动触发了 ref 的重新响应,即使没有实际修改 count 的值,它的计算函数仍然会被重新执行,并更新 count 的值为 1

三、customRef()

vue3customRef() 是 Vue 3 中的一个可以创建自定义的 Ref 的函数。
在 Vue 3 中,Ref是用来包装响应式数据的对象,类似于 Vue 2 中的 data 对象。Ref 对象可以通过 .value属性访问和修改其包装的值。

vue3customRef() 函数接受一个包含 getset 方法的对象作为参数,返回一个自定义的 Ref 对象。通过自定义 getset 方法,可以实现对 Ref 对象中的值进行自定义的操作或处理。

示例使用方式如下:

import { customRef } from 'vue';const myCustomRef = customRef((track, trigger) => {let value = 0;return {get() {track(); // 追踪依赖关系return value;},set(newValue) {value = newValue;trigger(); // 触发更新}};
});const count = myCustomRef.value;console.log(count); // 0myCustomRef.value = 10;console.log(count); // 10

在这个示例中,myCustomRef 是一个自定义的 Ref 对象,其 get 方法用于返回 value 的值,并使用 track 函数追踪依赖关系。set 方法用于设置新的值,并使用 trigger 函数触发更新。

注意,在 Vue 3 中,Ref 对象的 .value 属性是只读的,不能直接修改。因此,需要通过 getset 方法来访问和修改 Ref 对象中的值。

四、shallowReactive()

shallowReactive() ,用于创建一个浅响应式对象。

请添加图片描述

在 Vue 3 中,响应式 API 发生了一些变化。与 Vue 2 中使用的 Vue.observable() 不同,Vue 3 中引入了新的响应式函数,如 shallowReactive()、reactive()、shallowReadonly() 等。

shallowReactive() 函数用于创建一个浅响应式对象,意味着只有对象的顶层属性会被劫持成响应式的,而嵌套的属性不会被劫持成响应式的。这是与 reactive() 函数最大的区别。

使用 shallowReactive() 可以轻松地创建一个简单的响应式对象,而无需深度遍历对象的所有属性。

以下是一个使用 shallowReactive() 的示例:

import { shallowReactive } from 'vue'const obj = shallowReactive({name: 'Alice',age: 20,address: {city: 'New York',country: 'USA'}
})console.log(obj.name) // 输出:Alice
console.log(obj.age) // 输出:20
console.log(obj.address) // 输出:{ city: 'New York', country: 'USA' }obj.name = 'Bob'
console.log(obj.name) // 输出:Bobobj.address.city = 'Los Angeles'
console.log(obj.address.city) // 输出:Los Angeles// 但是嵌套属性的变化不会触发更新
obj.address.country = 'Canada'
console.log(obj.address.country) // 输出:Canada,但不会触发更新

五、shallowReadonly()

shallowReadonly() ,用于将一个对象转换为只读(read-only)的响应式代理。
这意味着被转换的对象将变成只读状态,不能进行修改,同时它的属性也会变成只读的响应式属性。

请添加图片描述

shallowReadonly() 的使用方式如下:

import { shallowReadonly } from 'vue';const original = { name: 'John', age: 25 };
const proxy = shallowReadonly(original);console.log(proxy.name); // 'John'
proxy.name = 'David'; // 抛出错误,不允许修改

该函数的特点是只会针对对象的第一层属性进行响应式代理,对于嵌套的对象属性,只会进行浅层代理。这意味着,被代理的对象的嵌套属性仍然可以被修改。

import { shallowReadonly } from 'vue';const original = { name: 'John', address: { city: 'New York', country: 'USA' } };
const proxy = shallowReadonly(original);console.log(proxy.address.city); // 'New York'proxy.address.city = 'Los Angeles'; // 可以进行修改
console.log(proxy.address.city); // 'Los Angeles'

需要注意的是,shallowReadonly() 只会对对象进行只读代理,但是它的属性仍然可以被修改。如果你希望所有层级的属性都是只读的,则可以使用 readonly() 函数。

六、toRaw()

toRaw() ,用于将一个响应式对象转换为普通的 JavaScript 对象。

在 Vue 3 中,使用 refreactivecomputed 等函数创建的响应式对象本身是一个代理对象,它会在访问或修改属性时触发依赖追踪,实现了数据的自动更新。然而,有时我们需要直接操作响应式对象的原始值,而不想触发依赖追踪,这时就可以使用 toRaw()

toRaw() 方法接收一个参数,即要转换的响应式对象,它会返回该对象的原始值。如果传入的对象不是响应式对象,toRaw() 会直接返回该对象本身。

下面是一个使用 toRaw() 的示例:

import { reactive, toRaw } from 'vue'const obj = reactive({ count: 0 })// 获取原始值
const rawObj = toRaw(obj)
console.log(rawObj) // { count: 0 }// 修改原始值,不会触发依赖追踪
rawObj.count = 1// 原始值的修改不会影响到响应式对象
console.log(obj.count) // 0

需要注意的是,toRaw() 只能将一层响应式对象转换为普通对象,如果转换的对象存在嵌套的响应式对象,则嵌套的响应式对象仍然是代理对象。如果需要深度转换整个对象树,可以使用 toRefs()isRef() 方法。

七、markRaw()

markRaw() ,用于阻止响应式系统追踪一个对象,从而使该对象变为 “原始”(raw)数据。

请添加图片描述

在 Vue 3 中,默认情况下,所有的对象都会被追踪并成为响应式对象,即当对象发生变化时,相关的界面会自动更新。然而,有时我们希望某些对象不被追踪,而作为普通的数据使用,这时我们可以使用 markRaw() 函数。

通过调用 markRaw() 函数,我们可以明确告诉 Vue 3 不要追踪某个对象,即使该对象本身是响应式的。这意味着对该对象的修改不会触发相关界面的更新。

一般情况下,我们只需要调用 markRaw() 函数来标记一个对象为原始数据即可,而不需要经常使用它。它通常用于避免特定对象被追踪,或者在某些场景下提高性能。

以下是一个示例:

import { reactive, markRaw } from 'vue'const obj = reactive({name: 'John',age: 30
})const rawObj = markRaw(obj)console.log(rawObj.name) // "John"// 修改原始对象的属性不会触发响应式更新
rawObj.name = 'Jane'console.log(rawObj.name) // "Jane"

在上面的示例中,obj 是一个 reactive 对象,它会被追踪并进行响应式更新。而 rawObj 是通过 markRaw() 函数将 obj 标记为原始对象,修改 rawObj 的属性不会触发响应式更新。

八、effectScope()

effectScope()是Vue3中新增的一个函数,用于创建一个作用域范围,在该范围内定义的响应式效果函数(effect)只会在范围内的响应式数据发生变化时执行。

通常情况下,响应式效果函数会在其依赖的任何响应式数据发生变化时都会执行。但有时候我们只希望在特定的作用域范围内执行效果函数,以避免不必要的计算和更新。

effectScope()函数创建一个作用域范围,并返回一个stop函数。调用该stop函数可以停止该范围内的所有效果函数的执行,并清理其依赖项。

以下是effectScope()的示例用法:

import { effect, reactive, effectScope } from 'vue'const foo = reactive({ count: 0 })effect(() => {console.log(foo.count)
})const stop = effectScope()effect(() => {console.log(foo.count * 2)
})foo.count++  // 输出:1 和 2stop()  // 停止第二个效果函数的执行foo.count++  // 只输出:3

在上述代码中,第一个效果函数会一直执行,因为它会响应foo.count的变化。而第二个效果函数在effectScope()范围内定义,只会在foo.count发生变化时才执行。调用stop()函数后,第二个效果函数将不再执行,即使foo.count再次发生变化。

effectScope()函数在一些特定场景下非常有用,比如在处理动态组件时,可以将用来清理的stop函数传递给子组件,以确保在组件销毁时停止所有相关的效果函数的执行。

九、getCurrentScope()

getCurrentScope()是Vue 3中的一个内置方法,用于获取当前组件的作用域。

在Vue 3中,组件的作用域是通过setup()函数中的propscontextattrs对象来访问的。getCurrentScope()方法可以获取到当前组件的作用域对象,包括这些属性和方法。

要使用getCurrentScope()方法,首先需要在组件的setup()函数中调用它来获取作用域对象,然后可以对这个对象进行操作。

例如:

import { getCurrentScope } from 'vue';export default {setup() {const scope = getCurrentScope(); // 获取当前组件的作用域对象// 对作用域对象进行操作console.log(scope.props); // 输出组件的props属性console.log(scope.context); // 输出组件的context属性console.log(scope.attrs); // 输出组件的attrs属性// 返回组件的template、render或jsx}
}

需要注意的是,getCurrentScope()方法仅在setup()函数内部使用有效,不能在其他地方使用。此外,getCurrentScope()方法只适用于使用Composition API编写的Vue 3组件。

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

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

相关文章

景联文科技:以高质量数据赋能文生图大模型

1月5日,在智求共赢・中国AIGC产业应用峰会暨无界AI生态合作伙伴大会上,中国AIGC产业联盟联合无界AI发布了《中国AIGC文生图产业白皮书2023》,从AIGC文生图发展历程、主流工具、产业实践以及规模预测等多个维度,全面揭示了中国AIGC…

定时任务扫表缺点解决方案

通过定时任务扫表,是我们在业务中经常会做的事情,一般是直接用xxl-job等定时任务去分页查询数据库,然后进行业务操作,这个方案,一般是最简单的,也是最有效的。 但是,他还是有一些缺点的&#x…

【elastic search】JAVA操作elastic search

目录 1.环境准备 2.ES JAVA API 3.Spring Boot操作ES 1.环境准备 本文是作者ES系列的第三篇文章,关于ES的核心概念移步: https://bugman.blog.csdn.net/article/details/135342256?spm1001.2014.3001.5502 关于ES的下载安装教程以及基本使用&…

节省时间:AI 模型靠谱下载方案汇总

这篇文章,想分享下我日常是如何下载模型的,包括下载来源和工具使用细节,希望对折腾模型的你也有帮助。 也希望开源和 AI 领域的研究者、从业者在做技术调研和落地实践的时候,都能节约一些时间。 写在前面 之前写了很多模型相关…

微信小程序:发送小程序订阅消息

文档:小程序订阅消息(用户通过弹窗订阅)开发指南 目录 步骤一:获取模板 ID步骤二:小程序端获取参数2.1、获取消息下发权限2.2、获取登录凭证(code) 步骤三:后端调用接口下发订阅消息…

【Web】CTFSHOW PHP命令执行刷题记录(全)

目录 web29 web30 web31 web32 web33 web34 web35 web36 web37-39 web40 web41 (y4✌脚本) web42 -44 web45 web46 -49 web50 web51 web52 web53 web54 web55-56 web57 web58 web59 web60 web61 web62 web63-65 web66-67 w…

2024秋招—国科微电子—系统测试工程师一面

前言 笔试后的3天约面 过程 自我介绍实习经历实习过程中最困难的一件事你的沟通能力怎么样项目经历介绍常见数据结构和算法介绍CS科班课程主要内容测试场景题Linux相关(管道、进程)如果在年终评级时,你的上司给了你完全不符的负面评价&…

QT 信号与槽

.h文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();public slots:void buttonLable();priv…

rke2 Online Deploy Rancher v2.8.0 latest (helm 在线部署 rancher v2.8.0)

文章目录 1. 简介2. 预备条件3. 安装 helm4. 安装 cert-manager4.1 yaml 安装4.2 helm 安装 5. 安装 rancher6. 验证7. 界面预览 1. 简介 Rancher 是一个 Kubernetes 管理工具&#xff0c;让你能在任何地方和任何提供商上部署和运行集群。 Rancher 可以创建来自 Kubernetes 托…

多平台多账号一站式短视频管理矩阵营销系统下载

矩阵营销系统多平台多账号一站式管理&#xff0c;一键发布作品。智能标题&#xff0c;关键词优化&#xff0c;排名查询&#xff0c;混剪生成原创视频&#xff0c;账号分组&#xff0c;意向客户自动采集&#xff0c;智能回复&#xff0c;多账号评论聚合回复&#xff0c;免切换&a…

Go语言的指针(深度解析)

指针是Go语言中的一个重要概念&#xff0c;它提供了对内存地址的直接访问和操作能力。通过指针&#xff0c;我们可以高效地传递和修改变量的值&#xff0c;避免了值传递所带来的拷贝开销。在本文中&#xff0c;我们将深入探讨Go语言指针的概念、使用方法和注意事项。 指针的本…

文档扫描与矫正-仿射变换

图像变换是计算机视觉和图像处理中的关键技术之一&#xff0c;它允许我们对图像进行各种形式的变形、调整和校正。其中&#xff0c;仿射变换是一种常见的变换方式。 在文档扫描过程中&#xff0c;由于拍摄角度和畸变等原因&#xff0c;文档图像可能存在一定程度的形变。仿射变…

【LeetCode】组合两个表(mysql)

题目 编写解决方案&#xff0c;报告 Person 表中每个人的姓、名、城市和州。如果 personId 的地址不在 Address 表中&#xff0c;则报告为 null 。 以 任意顺序 返回结果表。 结果格式如下所示。 答 select firstName ,lastName,city,state from Person left join Address …

软路由之爱快基于L2TP 实现

申明&#xff1a;本文仅针对国内SSTP&#xff0c;适用于国内的游戏加速&#xff0c;禁止一切利用该技术的翻墙行为。 相信很多接触过爱快的人都需要连接L2TP或PPTP&#xff0c;本文主要介绍通过爱快iKuai的L2TP 来实现异地组网。 一、准备工作 1、爱快 v3.x 2个&#xff08;免…

【linux 多线程并发】线程退出自动清理函数的使用,释放线程申请的资源,异常退出自动调用

线程退出回调函数 ​专栏内容&#xff1a; 参天引擎内核架构 本专栏一起来聊聊参天引擎内核架构&#xff0c;以及如何实现多机的数据库节点的多读多写&#xff0c;与传统主备&#xff0c;MPP的区别&#xff0c;技术难点的分析&#xff0c;数据元数据同步&#xff0c;多主节点的…

React与Vue性能对比

React 和 Vue 是目前前端开发中最流行的两个框架&#xff0c;它们在性能方面有一些不同。下面是一些关于这两个框架性能的说明和代码示例。 React React 的虚拟 DOM 使其具有很高的性能。React 的核心思想是将组件视为虚拟 DOM 的树形结构&#xff0c;当数据发生变化时&#…

SpringMVC源码解析——HTTP请求处理

在SpringMVC源码解析——DispatcherServlet的逻辑处理中&#xff0c;最后介绍到了org.springframework.web.servlet.DispatcherServlet的doDispatch方法中关于处理Web HTTP请求的核心代码是调用AbstractHandlerMethodAdapter类的handle方法&#xff0c;源码如下&#xff1a; /*…

iOS 按钮添加点击震动

1. 方法说明&#xff1a; iOS10后系统提供了一套API来简单实现震动&#xff1a; init时传入一个style定义好的枚举就可以实现不同的震动 typedef NS_ENUM(NSInteger, UIImpactFeedbackStyle) {UIImpactFeedbackStyleLight,UIImpactFeedbackStyleMedium,UIImpactFeedbackStyle…

作业:通过两台linux主机配置ssh实现互相免密登陆

做题步骤&#xff1a; 一.开启两个Linux主机&#xff0c;并且用ssh连接&#xff0c;要能够ping通 我这里是server&#xff1a;192.168.81.129 client&#xff1a;192.168.81.130 举例 步骤&#xff1a; 1.安装服务软件 2.运行软件程序 3.根据自定配置提供对应的服务/etc/chr…

Leaflet + Vue使用案例

区域边界及级联 1.获取区域边界JSON数据&#xff0c;下载后放到项目里 https://datav.aliyun.com/portal/school/atlas/area_selector data() {return {areaFeaturesData: null, // 南通市json数据areaLayer: null, // 区域边界图层isCheckClick: false,currentArea: null, //…