Vue3 响应式高阶用法之 `triggerRef()`

Vue3 响应式高阶用法之 triggerRef()

在 Vue3 的响应式系统中,shallowRef 提供了一种轻量级的响应式状态管理方式。然而,当我们需要对 shallowRef 的内层属性进行操作时,就会遇到一些限制。幸运的是,Vue3 提供了 triggerRef() 方法,可以帮助我们解决这个问题。本文将详细介绍 triggerRef() 的使用场景、基本用法、功能详解、最佳实践及案例。

文章目录

  • Vue3 响应式高阶用法之 `triggerRef()`
  • 一、简介
  • 二、使用场景
    • 2.1 何时使用 `shallowRef`
    • 2.2 何时使用 `triggerRef`
  • 三、基本使用
    • 3.1 定义 `shallowRef`
    • 3.2 修改顶层属性
    • 3.3 修改内层属性
    • 3.4 使用 `triggerRef` 强制更新
  • 四、功能详解
    • 4.1 `shallowRef` 的特性
    • 4.2 `triggerRef` 的作用
  • 五、最佳实践及案例
    • 5.1 使用 `triggerRef` 管理复杂状态
    • 5.2 避免不必要的响应式更新
  • 六、总结

一、简介

在 Vue3 中,响应式系统是其核心特性之一。shallowRef 是一种轻量级的响应式引用,它只对顶层属性进行响应式追踪,而不会递归地使其内部属性响应式。triggerRef() 方法则允许我们在特定情况下强制触发对 shallowRef 内层属性的响应,从而提高灵活性。

二、使用场景

2.1 何时使用 shallowRef

shallowRef 适用于以下场景:

  • 需要轻量级的响应式引用。
  • 只需对顶层属性进行响应式追踪。
  • 内部属性的变化不需要触发响应式更新。

2.2 何时使用 triggerRef

triggerRef 适用于以下场景:

  • 需要对 shallowRef 的内层属性进行操作,并希望这些操作触发响应式更新。
  • 特殊情况下需要手动控制响应式更新。

三、基本使用

3.1 定义 shallowRef

import { shallowRef } from 'vue';const state = shallowRef({nested: {value: 1}
});

3.2 修改顶层属性

state.value = { nested: { value: 2 } }; // 响应式更新

3.3 修改内层属性

直接修改内层属性不会触发响应式更新:

state.value.nested.value = 3; // 不会触发响应式更新

3.4 使用 triggerRef 强制更新

import { triggerRef } from 'vue';state.value.nested.value = 3; // 修改内层属性
triggerRef(state); // 强制触发响应式更新

四、功能详解

4.1 shallowRef 的特性

shallowRef 只对顶层属性进行响应式追踪,内部属性的变化不会触发响应式更新。这种特性使得 shallowRef 更加轻量和高效,适用于不需要深度响应式追踪的场景。

4.2 triggerRef 的作用

triggerRef 方法用于强制触发对 shallowRef 的响应式更新。通过调用 triggerRef,我们可以手动控制 shallowRef 的更新行为,从而在需要时对内部属性的变化进行响应式追踪。

五、最佳实践及案例

5.1 使用 triggerRef 管理复杂状态

在管理复杂状态时,shallowReftriggerRef 可以结合使用,以实现高效的响应式状态管理。

import { shallowRef, triggerRef } from 'vue';const state = shallowRef({user: {name: 'Alice',age: 25}
});// 修改内层属性
state.value.user.age = 26;// 强制触发响应式更新
triggerRef(state);

5.2 避免不必要的响应式更新

在某些情况下,我们可能只需要对特定操作进行响应式更新。此时,triggerRef 可以帮助我们避免不必要的响应式更新,提高性能。

import { shallowRef, triggerRef } from 'vue';const state = shallowRef({items: []
});// 添加新项目
function addItem(item) {state.value.items.push(item);triggerRef(state); // 仅在需要时触发响应式更新
}

六、总结

triggerRef() 是 Vue3 中一个强大的工具,可以在使用 shallowRef 时提供更大的灵活性。通过合理使用 triggerRef,我们可以在需要时手动控制响应式更新,从而在性能和响应式追踪之间取得平衡。希望本文能帮助你更好地理解和应用 triggerRef(),提升 Vue3 项目的开发效率。

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

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

相关文章

Yum源配置问题

一、配置yum源 1.备份当前yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS-Base.repo 到/etc/yum.repos.d/ wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 或者 curl …

【学习笔记】Redis学习笔记——第16章 Sentinel

第16章 Sentinel 监视一个或多个主服务器及其下属服务器,在主服务器故障时,降级主服务器并将某一从服务器选举为新服务器。 这里的Sentinel本质上只是一个运行在特殊模式下的Redis服务器。 16.1 启动并初始化Sentinel 使用命令redis-server启动Sentin…

shell脚本自动化安装启动各种服务

1、自动化配置dns服务器 A主机:vim dns.sh #!/bin/bash# 自动化部署dns# 1、下载bind# 2、修改配置文件# vim /etc/named.conf # listen-on port 53 { 127.0.0.1;any; }; 修改(定位替换)# allow-query { localhost;any; }; 修改&am…

vector以及迭代器失效

前言 学习完string,之后学习的就是vector。vector就是之前C语言中讲到过的顺序表,用三个变量分别记录资源的位置,容器的容量和容器中元素个数。原来的写法是直接使用指针加两个int变量,而标准库中,三个都是由指针确定的…

sql server 连接报错error 40

做个简单的记录,造成40 的原因有很多,你的错误并不一定就是我遇到的这种情况. 错误描述: 首先我在使用ssms 工具连接的时候是可以正常连接的,也能对数据库进行操作. 在使用 ef core 连接 Sql Server 时报错: Microsoft.Data.SqlClient.SqlException (0x80131904): A network-r…

hadoop学习(二)

一.MapReduce 1.1定义:是一个分布式运算程序的编程框架 1.2核心功能:将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序,并发运行在一个Hadoop集群上。 1.3优点 1)易于编程 它简单的实现一些接口&#…

【Linux】Ubuntu解决Release 文件已经过期问题

​今天在执行update更新软件包时遇到了此问题:E: http://cn.archive.ubuntu.com/ubuntu/dists/jammy-updates/InRelease 的 Release 文件已经过期(已经过期了 247天 21小时 33分 15秒)。该仓库的更新将不会应用,如图 ​ 这个报错之前其实经常遇到&#x…

电脑虚拟摄像头软件分享|用手机打破电脑摄像头的极限

随着手机摄像头的不断更新迭代,手机已经接近专业电脑摄像头的画质。这让我们可以花费更低的成本获取优质的电脑录像画面。今天小编给大家详细讲解电脑虚拟摄像头的在我们日常生活中的妙用,以及分享几款口碑不错的电脑虚拟摄像头软件。有需要的小伙伴可以…

周末两天我搭建了一个智能问答ai工具网站

背景 周五的时候我去看了一下Boos 直聘,然后沟通了一个10k-15k的职位,她问我会不会后端,我说会一些node,然后他跟我说他们的工作是去对接第三方的的AI工具,我说这个没问题,我自己原来接触过Stable Diffusi…

智能识海:基于深度学习的海洋生物检测系统开发指南

基于深度学习的海洋动物检测系统(UI界面YOLOv8/v7/v6/v5代码训练数据集) 引言 海洋动物检测在海洋生态保护、科学研究和渔业管理中起着至关重要的作用。通过深度学习技术,尤其是YOLO(You Only Look Once)模型&#x…

算法训练营第47天|1143.最长公共子序列|1035.不相交的线|53. 最大子序和|392.判断子序列

1143.最长公共子序列 思路:这道题比较难理解的是递推公式,要想明白状态转换和各个状态的意义。 如果text1[i - 1] 与 text2[j - 1]相同,那么找到了一个公共元素,所以dp[i][j] dp[i - 1][j - 1] 1; 如果text1[i - 1] 与 text2[j…

IO的分类有哪些

目录 一:BIO,NIO,AIO有什么区别 二:BIO,NIO,AIO有哪些适用场景 三:BIO的编程流程 四:NIO的三大核心部分 五:NIO中buffer的属性有哪些 六:BIO与NIO的对比 七:简…

Unity3D 转换微信小游戏指引 05 广告内购

Unity3D 转换微信小游戏指引系列(第五期 完结) 广告 在小程序后台页面找到推广->流量主 开通条件如下: 开通之后,需要接入广告组件。 调用创建广告组件的接口时,需要传入参数 adUnitId,这个是开通流量…

「C++系列」数组

文章目录 一、数组1. 声明数组2. 初始化数组3. 访问数组元素4. 遍历数组注意事项示例代码 二、多维数组1. 声明二维数组2. 初始化二维数组3. 访问二维数组元素4. 遍历二维数组注意事项示例代码 三、指向数组的指针1. 声明指向数组的指针2. 通过指针访问数组元素3. 指针和数组的…

json的数据结构

JSON 的数据结构 JSON 由两种数据结构组成:对象(字典)和数组。 一、对象 对象(object)是由键值对组成的无序集合。 键是字符串,值可以是任何类型,包括对象和数组;对象由一对花括…

Android 10.0 framework默认沉浸式状态栏功能实现

1. 前言 在10.0的系统rom定制化开发中,在实现状态栏的某些定制化开发中,在某些产品需要实现沉浸式状态栏,就是需要app 能全屏显示同样也能显示状态栏,接下来就来分析下相关的功能实现 如图: 2.framework默认沉浸式状态栏功能实现的核心类 frameworks\base\core\java\andro…

【神经网络】梯度下降的优化方法【数学公式+代码示例】

文章目录 1、简介2、指数加权平均2.1、公式2.2、代码 3、Momentum⭐3.1、公式演变3.2、代码 4、AdaGrad4.1、计算步骤4.2、代码示例 5、RMSProp5.1、公式5.2、代码5.3、小结 6、Adam6.1、公式和步骤解释⭐6.2、代码⭐6.3、优点 7、何为鞍点8、小结 🍃作者介绍&#…

Vue 渲染函数 JSX

Vue 提供一个h()函数用于创建vnodes,用于渲染网页。 JSX是JS的一个类似XML的扩展,与h()函数类似,也是可以创建vnodes,用于渲染网页。 1 渲染函数 & JSX 1.1 渲染函数 组合式API,setup()钩子的返回值是用于暴露数据给模版,…

国防科技大学深圳地区新生欢送会圆满举行

2024年7月28日,第97个八一建军节来临之际,在这个充满希望的盛夏时节,深圳地区迎来了13名即将踏入国防科技大学的优秀学子。 为了庆祝这一荣耀时刻,并表达对新生的深切祝福,在国防科技大学深圳校友会黄丹会长的积极倡议…

书生大模型实战营--L1关卡-Llamaindex RAG实践

一、安装llamaindex库 pip install llama-index pip install llama-index-embeddings-huggingface 二、问2024年巴黎奥运会 中国队获得几枚金牌,无法回答该问题 三、构建Llamaindex RAG 1、初始化llm 2、构建词向量模型 下载模型:git clone https://…