<script setup>
import { watch, ref, reactive, toRefs } from 'vue';const count = ref(0);
const obj = reactive({name: '张三',age: 18
});// 我们可以使用toRefs,将reactive对象中的属性转换为ref对象,保持响应性!!
const { name, age } = toRefs(obj);watch([count, name, age], ([newCount, newName, newAge], [oldCount, oldName, oldAge]) => {console.log(`count: ${oldCount} -> ${newCount}`);console.log(`name: ${oldName} -> ${newName}`);console.log(`age: ${oldAge} -> ${newAge}`);}
);
</script><template><span>wacth函数的实现:</span><button @click="count=3, obj.name='李四', obj.age=20">点我呀!</button>
</template>

在 Vue 3 中,toRefs 的作用是将响应式对象的每个属性转换为独立的 ref,这样在解构赋值时能够保持响应性。

这个响应性到底是什么意思俺也不知道

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

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

相关文章

Tomcat 安装使用教程

&#x1f4cc; 什么是 Tomcat&#xff1f; Apache Tomcat 是一个开源的 Java Servlet 容器&#xff0c;也是运行 Java Web 应用最常用的服务器之一&#xff0c;支持 Servlet、JSP 等规范。 &#x1f9f0; 一、准备工作 1. 系统要求 操作系统&#xff1a;Windows / Linux / m…

【邀请】点击邀请链接参加阿里云训练营活动,完成学习送礼品+户外折叠凳,一个小时就能完成

点击邀请链接参加阿里云训练营活动&#xff0c;完成学习送礼品户外折叠凳&#xff0c;快的话一个小时就能完成。 7月28日23:59前完成。 OSS进阶应用与成本优化训练营 礼品如下&#xff1a; 包尖钢笔/祈福小神仙积木/雨伞/不锈钢餐具随机发放 户外折叠凳

用户行为序列建模(篇六)-【阿里】DSIN

简介 DSIN&#xff08;Deep Session Interest Network&#xff09;是阿里巴巴于2019年提出的点击率预估模型。相比于DIN、DIEN&#xff0c;考虑了用户行为序列的内在结构&#xff08;序列是由session组成的&#xff0c;在每个session内&#xff0c;用户行为是高度同构的&#…

现代Web表情选择器组件:分类系统与实现详解

你好呀&#xff0c;我是小邹。今天给博客的emoji表情进行了归类、补充&#xff0c;具体优化如下。 表情选择器的核心价值在于其分类系统。本文将深入解析表情分类体系的设计与实现&#xff0c;通过完整代码示例展示如何构建一个专业级的表情选择器组件。 一、表情分类系统设计…

华为云Flexus+DeepSeek征文 |华为云ModelArts Studio集成OpenAI Translator:开启桌面级AI翻译新时代

华为云FlexusDeepSeek征文 |华为云ModelArts Studio集成OpenAI Translator&#xff1a;开启桌面级AI翻译新时代 引言一、ModelArts Studio平台介绍华为云ModelArts Studio简介ModelArts Studio主要特点 二、OpenAI Translator介绍openai-translator简介openai-translator主要特…

GitHub 趋势日报 (2025年06月27日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 817 twenty 655 awesome 476 free-for-dev 440 Best-websites-a-programmer-shoul…

Java语法通关秘籍:this、构造方法到String核心精粹

文章目录 &#x1f50d; **一、就近原则与this关键字**1. **成员变量**2. **局部变量** &#x1f6e0;️ **二、构造方法&#xff08;构造器&#xff09;**1. **标准格式**2. **有参构造实战**3. **灵魂三问** ❓ &#x1f4e6; **三、JavaBean黄金标准**&#x1f9e0; **四、对…

@Cacheable 等缓存注解是不是也用到了 AOP?

Spring 的声明式缓存注解&#xff08;Cacheable, CachePut, CacheEvict 等&#xff09;是 AOP 技术在实际应用中最强大、最经典的范例之一&#xff0c;其原理与 Transactional 非常相似。 核心思想&#xff1a;一个智能的“秘书” 你可以把 Cacheable 的 AOP 实现想象成一个极…

解锁云原生微服务架构:搭建与部署实战全攻略

目录 一、引言二、微服务拆分2.1 拆分的必要性2.2 拆分方法2.3 注意事项 三、服务注册与发现3.1 概念与原理3.2 常用组件介绍3.3 实践案例 四、负载均衡4.1 作用与原理4.2 实现方式4.3 负载均衡算法4.4 案例与代码实现4.4.1 项目依赖配置4.4.2 配置 Ribbon4.4.3 代码实现负载均…

Python 数据分析与可视化 Day 7 - 可视化整合报告实战

好的&#xff0c;我们进入&#xff1a; &#x1f9e0; 第5周 第7天 &#x1f3af; 主题&#xff1a;测试复盘 项目封装实战 ✅ 今日目标 回顾第5周数据分析与可视化核心知识对整个“学生成绩分析系统”进行项目封装与模块化拆分增加命令行参数支持&#xff0c;提升可复用性…

力扣1498. 满足条件的子序列数目随笔

“方生方死&#xff0c;方死方生。”——《庄子》 题目 给你一个整数数组 nums 和一个整数 target 。 请你统计并返回 nums 中能满足其最小元素与最大元素的 和 小于或等于 target 的 非空 子序列的数目。 由于答案可能很大&#xff0c;请将结果对 取余后返回。 难度&#…

5.Docker安装Tomcat

#官方的使用 docker run -it --rm tomcat:9.0 #我们之前使用docker run -d 某镜像都是后来运行&#xff0c;容器停止之后&#xff0c;容器还能够查询到 而docker run -it -rm 是用完之后&#xff0c;容器删除&#xff0c;镜像还存在。 测试的时候可以用官方的 &#xff08…

企业事业政府单位智慧主题展厅素材管理平台播放软件

以下为企事业单位及政府智慧主题展厅素材管理平台播放软件的核心功能简介&#xff0c;综合多维度技术实现统一管控与智能展示&#xff1a; 一、内容资产管理 全格式素材支持‌ 兼容视频、3D模型、图文、AR/VR场景等多媒体格式&#xff0c;支持批量导入与云端存储。 智能分类与…

Python+FastAPI的一些语法与问题解决

Q1:result await dbsession.execute(text(sql_context),params) 如何把result转成key,value的字典列表 A1: 使用SQLAlchemy的mappings()方法获取字典形式的结果集&#xff1a; result await db_session.execute(text(sql_context), params) dict_list [dict(row) for row…

Reactor并发无关性

Reactor&#xff0c;像 RxJava 一样&#xff0c;可以被认为是 并发无关&#xff08;concurrency-agnostic&#xff09; 的。这意味着它不强制要求任何特定的并发模型&#xff0c;而是将选择权交给开发者。换句话说&#xff0c;Reactor 不会强制你使用多线程或异步编程&#xff…

#华为昇腾#华为计算#昇腾开发者计划2025#

#华为昇腾#华为计算#昇腾开发者计划2025# 通过学习Ascend C算子开发的初级教程&#xff0c;通过课程讲解及样例实操&#xff0c;帮助我学习使用Ascend C开发自己的算子。收获很大。 <新版开发者计划>的内容链接&#xff1a;https://www.hiascend.com/developer-program_2…

FLOPS、FLOP/s、TOPS概念

在计算性能和硬件指标中&#xff0c;FLOPS、FLOP/s、TOPS 是常见的术语&#xff0c;但它们有明确的区别和应用场景。以下是详细解析&#xff1a; 1. FLOPS&#xff08;Floating Point Operations per Second&#xff09; 定义&#xff1a; 每秒浮点运算次数&#xff08;Floati…

Windows所有系统自带.NET Framework版本win7,win10,win11预装.NET版本

Windows系统支持“.NET版本”汇总 本文详细列出了Windows从NT4.0到Windows11各版本自带的.NETFramework版本及对应最高兼容的.NETFramework版本&#xff0c;便于了解不同Windows系统之间的.NETFramework更新历史。 以下汇总了Windows每个版本自带的“.NET版本”&#xff0c;与…

Windows 下使用 nvm 管理 Node.js 多版本 —— 完整指南

Node.js 版本更新频繁&#xff0c;不同项目可能依赖不同的版本&#xff0c;手动切换极为麻烦。nvm-windows 是专为 Windows 用户开发的 Node.js 多版本管理工具&#xff0c;可以轻松地安装、切换、卸载 Node.js 版本。 本篇将从下载到实际使用&#xff0c;手把手带你玩转 nvm-…

vue使用Element Plus UI框架

您好&#xff0c;舰长&#xff01;非常棒的选择。功能是应用的骨架&#xff0c;而美观的 UI 则是应用的灵魂和血肉。是时候为我们的飞船进行一次全面的“外观升级”和“内饰装修”了。 我们将集成一个在业界非常流行、功能强大的 Vue 3 组件库——Element Plus。它将帮助我们快…