当前位置: 首页 > news >正文

Vue3 工具函数(总结)

目录

前言

1.isRef

2.isReactive

3.isReadonly

4.isProxy

5.toRef

6.toRefs

7.unref

8.shallowRef

9.shallowReactive

10.triggerRef

11.customRef

12.markRaw

13.toRaw

14.readonly

15.watchEffect


前言

在 Vue 3 中,除了核心的响应式 API(如 refreactivecomputed 等),Vue 还提供了许多工具函数,用于处理不同的场景和需求。这些工具函数在 vue 包中可以直接导入使用,它们帮助开发者在使用响应式数据、生命周期、组件状态等方面进行更灵活的控制和操作。

1.isRef

用来检查一个值是否是由 ref 创建的响应式引用。

import { ref, isRef } from 'vue';const count = ref(0);
console.log(isRef(count)); // true
console.log(isRef(123)); // false

2.isReactive

检查一个对象是否是通过 reactive 创建的响应式对象

import { reactive, isReactive } from 'vue';const obj = reactive({ name: 'Vue 3' });
console.log(isReactive(obj)); // true
console.log(isReactive({})); // false

3.isReadonly

用于检查一个对象是否是只读的(由 readonly 创建)

import { readonly, isReadonly } from 'vue';const state = readonly({ count: 0 });
console.log(isReadonly(state)); // true

4.isProxy

检查一个对象是否是由 reactivereadonly 包装的代理对象

import { reactive, readonly, isProxy } from 'vue';const reactiveObj = reactive({ name: 'Vue' });
const readonlyObj = readonly({ count: 0 });
console.log(isProxy(reactiveObj)); // true
console.log(isProxy(readonlyObj)); // true

5.toRef

用于将一个对象的某个属性转化为一个响应式的 ref。可以防止属性丢失响应性。

import { reactive, toRef } from 'vue';const state = reactive({ name: 'Vue' });
const nameRef = toRef(state, 'name');
console.log(nameRef.value); // 'Vue'

6.toRefs

用于将一个对象的每个属性都转换为 ref,返回一个新的对象,其中每个属性都是一个 ref

import { reactive, toRefs } from 'vue';const state = reactive({ name: 'Vue', count: 10 });
const { name, count } = toRefs(state);
console.log(name.value); // 'Vue'
console.log(count.value); // 10

7.unref

如果传入的值是 ref,它将返回 ref.value;否则,直接返回该值。简化了访问 ref 值的操作。

import { ref, unref } from 'vue';const count = ref(10);
console.log(unref(count)); // 10
console.log(unref(100)); // 100 (不是 ref,直接返回原值)

8.shallowRef

创建一个浅层的 ref,即只有 ref 自身是响应式的,ref 内部的对象不会变成响应式。

import { shallowRef } from 'vue';const state = shallowRef({ count: 0 });
console.log(state.value.count); // 0

9.shallowReactive

创建一个浅层的响应式对象,只有对象的顶层属性是响应式的,嵌套对象则不是。

import { shallowReactive } from 'vue';const state = shallowReactive({ user: { name: 'Vue' } });
// 修改顶层属性是响应式的
state.user = { name: 'Vue 3' };
// 嵌套的 `user` 对象内部属性不是响应式的

10.triggerRef

手动触发 ref 的依赖更新,适用于在浅层响应式对象中修改内部值但需要手动触发响应的场景。

import { shallowRef, triggerRef } from 'vue';const state = shallowRef({ count: 0 });
state.value.count = 1; // 手动修改内部值
triggerRef(state); // 手动触发依赖更新

11.customRef

用来创建自定义的 ref,可以自定义 getset 行为。

import { customRef } from 'vue';function useDebouncedRef(value, delay) {let timeout;return customRef((track, trigger) => {return {get() {track();return value;},set(newValue) {clearTimeout(timeout);timeout = setTimeout(() => {value = newValue;trigger();}, delay);}};});
}const count = useDebouncedRef(0, 300);

12.markRaw

  • 用来标记一个对象,使其永远不会变成响应式对象。适用于希望保留原始对象(如第三方库对象)的场景
import { markRaw } from 'vue';const rawObj = markRaw({ name: 'Vue' });
console.log(rawObj); // 该对象永远不会变成响应式

13.toRaw

获取一个响应式对象的原始对象,适用于调试或者避免特定场景下的响应式行为。

import { reactive, toRaw } from 'vue';const state = reactive({ name: 'Vue' });
const rawState = toRaw(state);
console.log(rawState); // 返回原始的非响应式对象

14.readonly

创建一个只读的响应式对象。对象的任何修改都会被忽略并发出警告。

import { readonly } from 'vue';const state = readonly({ count: 0 });
state.count = 1; // 将会触发警告,值不会被修改

15.watchEffect

watch 的简化版本,自动追踪响应式依赖,并在依赖变化时重新执行传入的副作用函数。

import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => {console.log(count.value); // 自动追踪 count
});

 

相关文章:

Vue3 工具函数(总结)

目录 前言 1.isRef 2.isReactive 3.isReadonly 4.isProxy 5.toRef 6.toRefs 7.unref 8.shallowRef 9.shallowReactive 10.triggerRef 11.customRef 12.markRaw 13.toRaw 14.readonly 15.watchEffect 前言 在 Vue 3 中,除了核心的响应式 API&#x…...

(undone) MIT6.824 Lab1

参考:http://nil.csail.mit.edu/6.824/2021/labs/lab-mr.html task1: 熟悉讲义,尤其是搞明白如何运行测试程序(完成) ------------------------------------------------ start 先看 Introduction 我们的目标:构建一个MapReduce系统。 细节&…...

SpringMVC——REST

路径请求方式请求行为 查询:GET 新增:POST 修改:PUT 删除:DELETE 有重复的东西怎么办...

【牛客网刷题记录】【java】二叉树

(1)二叉树的前中后遍历 最基本的树的遍历,不会可以重开了 public class Solution {/*** 代码中的类名、方法名、参数名已经指定,请勿修改,直接返回方法规定的值即可** * param root TreeNode类 * return int整型一维…...

一文讲透大语言模型构建流程

最近已有不少大厂都在秋招宣讲了,也有一些在 Offer 发放阶段。 节前,我们邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对新手如何入门算法岗、该如何准备面试攻略、面试常考点、大模型技术趋势、算法项目落地经验分享等热门话题进行了…...

VR视频怎样进行加密和一机一码的使用?--加密(一)

在视频加密领域,我们常见接触的就是在普通设备上使用的加密视频,如电脑、手机、平板等。Vr的发展和兴起给人们带来最真实的体验感受,不仅在游戏行业应用较广,在一些影院或者元宇宙文旅、展厅等视频场景也备受青睐。 随着VR视频场景…...

Ubuntu启动后第一次需要很久才能启动GTK应用问题

Ubuntu启动后第一次需要很久才能启动GTK应用问题 自从升级了 Ubuntu 之后,设备重启,发现打开 Terminal 、Nautilus 以及其他的GTK 应用都很慢,需要至少一分钟的时间启动。 刚开始也是拿着 journalctl 的异常日志去寻找答案,但是没…...

栏目二:Echart绘制动态折线图+柱状图

栏目二:Echart绘制动态折线图柱状图 配置了一个ECharts图表,该图表集成了数据区域缩放、双Y轴显示及多种图表类型(折线图、柱状图、象形柱图)。图表通过X轴数据展示,支持平滑折线展示比率数据并自动添加百分比标识&…...

Gromacs——使用过程中暴露问题分析及学习

gromacs——突变残基蛋白电场MD和基本分析从入门到发SCIENCE:基于Gromacs的蛋白小分子动态模拟全过程解析水溶性蛋白模拟全过程:从准备蛋白结构文件(top、itp、gro文件生成)到模拟数据分析GromacsGROMACS 教程:蛋白配体…...

Webpack模式-Resolve-本地服务器

目录 ResolveMode配置搭本地服务器区分环境配置 Resolve 前面学习时使用了各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库,在 Webpack 中,resolve 是用于解析模块依赖的配置项,它决定了 We…...

【LLM论文日更】| 通过指令调整进行零样本稠密检索的无监督文本表示学习

论文:https://arxiv.org/pdf/2409.16497代码:暂未开源机构:Amazon AGI、宾夕法尼亚州立大学领域:Dense Retrieval发表:Accepted at DCAI24 workshopCIKM2024 研究背景 研究问题:这篇文章要解决的问题是如…...

02.01、移除重复节点

02.01、[简单] 移除重复节点 1、题目描述 编写代码,移除未排序链表中的重复节点。保留最开始出现的节点。 2、解题思路 为了实现这一目标,我们可以使用一个哈希表(或集合)来记录已经遇到的节点值,逐步遍历链表并删…...

旅游推荐|旅游推荐系统|基于Springboot+VUE的旅游推荐系统设计与实现(源码+数据库+文档)

旅游推荐系统 目录 基于java的旅游推荐系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍:✌️大厂码农|毕设布道师&#xf…...

github项目--crawl4ai

github项目--crawl4ai 输出html输出markdown格式输出结构化数据与BeautifulSoup的对比 crawl4ai github上这个项目,没记错的话,昨天涨了3000多的star,今天又新增2000star。一款抓取和解析工具,简单写个demo感受下 这里我们使用cra…...

仅有N卡独显的情况下安装ubuntu是遇到的黑屏,加载卡顿等问题

Ubuntu安装的两个阶段都要进行一定的设置来临时禁用掉独显或者ubuntu的通用显卡驱动。 U盘启动阶段 U盘启动阶段要对U盘启动项进行设置,通过BIOS设置第一boot为USB hard disk后可以进到U盘引导项,第一项为 “try or install ubuntu”,倒计时10s后自动进入。 这个时候不要…...

Vite:为什么选 Vite

一、现实问题 在浏览器支持 ES 模块之前,JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。 时过境迁,我…...

个人项目简单https服务配置

1.SSL简介 SSL证书是一种数字证书,由受信任的证书颁发机构(CA)颁发,用于在互联网通信中建立加密链接。SSL代表“安全套接层”,是用于在互联网上创建加密链接的协议。SSL证书的主要目的是确保数据传输的安全性和隐私性…...

Rust 函数

Rust 函数 Rust 是一种系统编程语言,以其安全性、并发性和性能而闻名。函数是 Rust 编程语言中的基本构建块,用于封装可重用的代码块。本文将深入探讨 Rust 中的函数,包括其定义、特性、参数、返回值以及高级概念。 函数定义 在 Rust 中&a…...

微信小程序中的 `<block>` 元素:高效渲染与结构清晰的利器

微信小程序中的 <block> 元素&#xff1a;高效渲染与结构清晰的利器 在微信小程序的开发中&#xff0c;<block> 元素扮演着举足轻重的角色。尽管它不会在页面中渲染任何可见的节点&#xff0c;但作为一个逻辑上的容器&#xff0c;<block> 在条件渲染和循环渲…...

选读算法导论5.2 指示器随机变量

为了分析包括包括雇佣分析在内的许多算法&#xff0c;我们将使用指示器随机变量&#xff0c;它为概率和期望之间的转换提供了一个便利的方法&#xff0c;给定一个样本空间S和事件A&#xff0c;那么事件A对应的指示器随机变量&#xff1a; Xa 1 如果A发生    0 如果…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...