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

Vue的watch函数实现

<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.lqws.cn/news/566623.html

相关文章:

  • 华为云 Flexus+DeepSeek 征文|华为云 Flexus 云服务 Dify-LLM 平台深度部署指南:从基础搭建到高可用实践
  • 智能制造——解读西门子数字化工厂规划报告(三年实施计划)【附全文阅读】
  • 机器学习在智能供应链中的应用:需求预测与库存优化
  • 大事件项目记录12-文章管理接口开发-总
  • 设计模式之适配器模式
  • OpenCV读取照片和可视化详解和代码示例
  • MySQL 安装使用教程
  • Java垃圾收集机制Test
  • PL-SLAM: Real-Time Monocular Visual SLAM with Points and Lines
  • Ai工具分享(2):Vscode+Cline无限免费的使用教程
  • XWPFDocument导出word文件
  • Linux中《动/静态库原理》
  • Redis缓存击穿深度解析:从现象到实战的完整解决方案
  • github上传代码步骤(http)
  • Cesium快速入门到精通系列教程十二:Cesium1.74中环绕地球生成​​经线环​​
  • Javaweb - 7 xml
  • 【智能协同云图库】智能协同云图库第三弹:基于腾讯云 COS 对象存储—开发图片模块
  • 日常 AI 工具汇总
  • Oracle 递归 + Decode + 分组函数实现复杂树形统计进阶(第二课)
  • 深入剖析 Linux 内核网络核心:sock.c 源码解析
  • 阿里云ACP-数据湖和机器学习
  • 解锁Ubuntu安装:从新手到高手的通关秘籍
  • Java 大视界 -- 基于 Java 的大数据分布式存储在科研大数据归档与长期保存中的应用(328)
  • 从UI设计到数字孪生实战演练:打造智慧交通的综合管理平台
  • 鸿蒙 Swiper 组件解析:轮播交互与动画效果全指南
  • 基于STM32的数字频率计设计
  • LoRA训练-理论基础
  • 大模型在恶性心律失常预测及治疗方案制定中的应用研究
  • 智慧水务:未来城市水务管理的创新实践与科技飞跃
  • Go 中的 range 表达式详解:遍历数组、切片、字符串与 Map