Vue组合式API进阶:深入了解进阶API

目录

引言 

进阶API介绍

        1.shallowRef()

        2.triggerRef()

        3.customRef ()

        4.toRow()

引言 

       在Vue 3中,组合式API为开发者提供了更加灵活和直观的方式来组织和管理组件的逻辑。除了基础的refreactive之外,Vue还提供了许多高级API函数,帮助我们在更复杂的场景中处理响应式数据。本文将深入讲解shallowReftriggerRefcustomReftoRaw这些进阶API函数。

进阶API介绍

        1.shallowRef()

   shallowRef 在 Vue 3 的组合式 API 中,允许你创建一个只对其 .value 属性进行浅响应式的引用。这意味着,当你修改 shallowRef 所引用的对象的内部属性时,Vue 的响应式系统不会触发更新。只有当你替换整个对象时,视图才会更新。

        这种特性在某些场景下非常有用,特别是当你处理大型对象或数组,并且你只想对整个对象的替换进行响应式追踪,而不是其内部属性的变化时。使用 shallowRef 可以避免不必要的性能开销,因为 Vue 不需要追踪对象内部属性的变化。

示例:

import { shallowRef } from 'vue';  // 假设有一个复杂的对象,我们只关心它的替换,不关心内部属性的变化  
const complexObject = shallowRef({  property1: { nestedProperty: 'value' },  property2: ['item1', 'item2']  
});  // 修改内部属性不会触发视图更新  
complexObject.value.property1.nestedProperty = 'new value';  // 替换整个对象会触发视图更新  
complexObject.value = {  newProperty: 'newValue'  
};

        2.triggerRef()

  triggerRef 在 Vue 3 的组合式 API 中,主要用于手动触发对 shallowRef 或 ref 的依赖更新。在某些情况下,当你知道某个引用值已经发生了变化,但 Vue 的响应式系统尚未捕获到这种变化时,triggerRef 就派上了用场。

  shallowRef 创建一个只对其 .value 属性进行浅响应式的引用。这意味着,当修改 shallowRef 引用的对象的内部属性时,Vue 的响应式系统不会触发更新。而 triggerRef 允许你在这种情况下手动触发视图更新。

        举个例子,假设你有一个 shallowRef 引用的对象,你修改了该对象的某个属性,但由于是浅响应式,Vue 不会自动更新视图。此时,你可以调用 triggerRef 函数并传入你的 shallowRef 引用,以手动触发视图的更新。

示例:

import { shallowRef, triggerRef } from 'vue';  const state = shallowRef({ count: 1 });  function change() {  state.value.count = 23;  triggerRef(state); // 手动触发视图更新  
}

        3.customRef ()

   customRef 接收一个工厂函数作为参数,该函数有两个参数:track 和 triggertrack 用于追踪依赖项,而 trigger 则用于触发更新。工厂函数应该返回一个对象,该对象具有 get 和 set 方法,用于获取和设置 ref 的值。

   customRef 的应用场景广泛,其中一个常见的场景是实现防抖或节流功能。通过控制依赖项的收集和更新触发的时机,可以有效地防止因为频繁触发更新而导致的性能问题。

示例:

import { customRef } from 'vue'export function useDebouncedRef(value, delay = 200) {let timeoutreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, delay)}}})
}

        该代码定义了一个名为useDebouncedRef的自定义Vue ref函数,它使用customRef来实现防抖(debounce)功能。防抖是一种优化手段,用于限制某个函数在短时间内被频繁调用。

        4.toRow()

   toRaw() 是 Vue 3 Composition API 中的一个方法,它用于获取响应式对象的原始对象。在 Vue 3 中,当你使用 reactive() 或 ref() 创建响应式对象或引用时,这些对象或引用会被 Vue 的响应式系统“包装”起来,以便能够追踪它们的变化并触发相应的更新。

        toRaw 的主要作用是将一个由 reactive 生成的响应式对象转化为普通对象。当你不希望某个响应式对象再被 Vue 的响应式系统追踪,或者你想要访问该对象的原始状态时,可以使用 toRaw

示例:

import { reactive, toRaw } from 'vue';  const state = reactive({  count: 0  
});  const rawState = toRaw(state);  console.log(rawState === state); // 输出 false,因为 rawState 是原始对象,而 state 是响应式对象  
console.log(rawState.count); // 输出 0,可以访问原始对象的属性

   toRaw() 和 toRef ()的主要区别在于它们处理响应式数据的方式和目的不同。toRaw 用于获取响应式对象的原始版本,以便进行不触发更新的操作;而 toRef 则用于将对象中的单个属性转化为响应式数据,以便单独处理该属性的变化。

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

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

相关文章

C++——STL容器——vector

vector是STL容器的一种,和我们在数据结构中所学的顺序表结构相似,其使用和属性可以仿照顺序表的形式。vector的本质是封装了一个动态大小的数组,支持动态管理容量、数据的顺序存储以及随机访问。 1.前言说明 vector作为容器,应该…

深入理解C++中的仿函数(Functors)

在C中,仿函数或函数对象是通过重载operator()的类实例来模拟函数行为的对象。这种特性使得C的对象可以像函数一样被调用,从而为编程提供了极大的灵活性和强大的功能。 1. 什么是仿函数? 仿函数是一个类,它定义了一个或多个opera…

【设计模式】使用策略模式优化表单校验逻辑

什么是策略? 所谓策略,就是根据已知条件决定要做出怎样的行为。 举个栗子:我要实现一个表单校验功能,要求 name 不能为空且长度必须大于 2 且小于 4,age 不能为空且必须为纯数字。 这样的判断逻辑直接用 if-else 就…

安全再升级,亚信安慧AntDB数据库与亚信安全二次牵手完成兼容性互认证

日前,湖南亚信安慧科技有限公司(简称:亚信安慧)的产品与亚信科技(成都)有限公司(简称:亚信安全)再次携手,完成亚信安慧AntDB数据库与亚信安全IPoE接入认证系统…

R和Python市场篮分析算法及行为分析模型

🎯要点 行为数据分析:🎯线性统计研究生学业表现:🖊绘制测试分数配对图 | 🖊构建简单线性回归模型,拟合数据 | 🖊构建多线性回归,三维可视化数据拟合模型 | &#x1f58a…

重学数论1:不定方程的引入

研究的对象:不定方程 文章目录 研究的对象:不定方程不定方程引入:裴蜀定理证明:欧几里得算法证明:充分性证明:必要性证明: 战术总结: 不定方程引入: 不定方程&#xff0…

「 网络安全常用术语解读 」SBOM主流格式SPDX详解

SPDX(System Package Data Exchange)格式是一种用于描述软件组件(如源代码)的规范,它提供了一种标准化的方法来描述软件组件的元数据,包括其许可证、依赖项和其他属性。SPDX最初由Linux基金会于2010年发起&…

复旦微JFM7VX690计算后IO接口模块,用于雷达信号处理、数据处理等需要高速密集计算的应用场景

计算后IO接口模块 1 介绍 1.1 产品概述 计算后IO接口模块主要由复旦微JFM7VX690型FPGA、国产以太网收发器YT8521、国产BMC芯片GD32F450、国产CPLD芯片EF2L45BG256B、国产内存颗粒等主要芯片组成,采用标准6U VPX尺寸设计。 本计算后IO接口模块主要用于雷达信号处…

Java面试八股之Java中数组有没有length()方法?String呢?为什么?

Java中数组有没有length()方法?String呢?为什么? 数组: 数组没有名为length()的方法,但有一个属性叫做length。可以通过数组名直接访问这个属性来获取数组的长度(即元素个数)。这是一个整数值&…

《Redis使用手册之有序集合》

《Redis使用手册之有序集合》 目录 **《Redis使用手册之有序集合》****ZADD:添加或更新成员****ZREM:移除指定的成员****ZSCORE:获取成员的分值****ZINCRBY:对成员的分值执行自增或自减操作****ZCARD:获取有序集合的大…

【redis】Redis数据类型(三)List类型

目录 List类型介绍特点 List数据结构附:3.2以前的版本(介绍一下压缩列表和双向链表)压缩列表ZipList双向链表LinkedList 常用命令lpush示例 lpushx示例 rpush示例 rpushx示例 LPOP示例 RPOP示例 BLPOP非阻塞行为阻塞行为相同的 key 被多个客户端同时阻塞在 MULTI/EX…

[笔试强训day06]

文章目录 NC10 大数乘法NC1 大数加法NC40 链表相加(二) NC10 大数乘法 NC10 大数乘法 #include <string> #include <vector> class Solution {public:string solve(string s, string t) {int m s.size(), n t.size();reverse(s.begin(), s.end());reverse(t.beg…

Matlab图像处理——基于BP神经网络的车牌标识识别系统

1. 数据集介绍 中国交通标志数据集&#xff1a; https://nlpr.ia.ac.cn/pal/trafficdata/detection.html 该数据集包含58类交通标志。 2. 数据处理 按照文件标签&#xff0c;将数据集划分了58类&#xff0c;如下&#xff1a; 对应的类别信息记录如下&#xff1a; 限速5km/…

2024 一带一路暨金砖国家技能发展与技术创新大赛【企业信息系统安全赛项】选拔赛样题

2024 一带一路暨金砖国家技能发展与技术创新大赛--企业信息系统安全赛项任务书 第一阶段&#xff1a; CTF 夺旗任务一 WEBCMS任务二 杂项 MISC任务三 Linux 应急响应分析任务四 Baby_PWN任务五 流量溯源 第二阶段&#xff1a; 企业网络安全配置与渗透需要2023环境私信博主&…

element-plus中使用el-switch时,用‘0,1’或者0,1来代替true,false绑定

介绍 switch 开关默认用 true, false来绑定的&#xff0c;但是在实际的项目中&#xff0c;有时候根据后端的接口返回&#xff0c;也可能会用字符串0 和 1 &#xff0c;或者数字 0,1来代替; 具体实现如下 详情&#xff1a; 主要实现方式是通过使用el-switch组件里的 active-val…

企业计算机服务器中了rmallox勒索病毒怎么处理,rmallox勒索病毒处理建议

在网络技术不断发展的时代&#xff0c;网络在企业中的应用广泛&#xff0c;可以为企业带来更多的便利&#xff0c;大大提升了企业的生产效率&#xff0c;但网络作为虚拟世界&#xff0c;在为企业提供便利的同时&#xff0c;也为企业数据安全带来严重威胁。近期&#xff0c;云天…

mysql 删除数据,导致存在表空间碎片的解决方法

mysql删除数据&#xff0c;导致存在表空间碎片的解决方法 1.分区表2. 使用OPTIMIZE TABLE3. 定期重建表4. 监控和维护5. 考虑其他存储引擎或数据库系统&#xff1a;6. 调整删除策略&#xff1a; 删除大量数据&#xff0c;尤其是频繁发生的删除操作&#xff0c;确实可能导致表空…

ffmpeg命令行工具安装

1. root用户安装 #!/bin/bash sudo yum install epel-release -y#由于CentOS没有官方FFmpeg rpm软件包。但是&#xff0c;我们可以使用第三方YUM源&#xff08;Nux Dextop&#xff09;完成此工作。--外网 sudo rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro…

【YOLO改进】换遍IoU损失函数之EIoU Loss(基于MMYOLO)

EIoU损失函数 设计原理 一、IoU的局限性 IoU&#xff08;Intersection over Union&#xff09;是一种常用于评估目标检测模型性能的指标&#xff0c;特别是在计算预测边界框与真实边界框之间的重叠程度时。然而&#xff0c;IoU存在一些局限性&#xff0c;尤其是当两个边界框…

[python趣味实战]----基于python代码实现浪漫爱心 დ

正文 01-效果演示 下图是代码运行之后的爱心显示结果&#xff1a; 下面的视频该爱心是动态效果&#xff0c;较为简洁&#xff0c;如果需要使用&#xff0c;可以进行完善&#xff0c;这里只是一个趣味实战&#xff0c;下面将对代码实现进行非常详细地描述&#xff1a; 浪漫爱心…