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

Vue3中watch监视reactive对象方法详解

在Vue3中,使用watch监视reactive对象时,需根据监视的目标选择合适的方法。以下是详细的步骤和说明:

1. 监视整个reactive对象

  • 自动深度监视:直接监视reactive对象时,Vue3会默认启用深度监视,无需设置deep: true

javascript

复制

import { reactive, watch } from 'vue';

const state = reactive({
  count: 0,
  user: { name: 'Alice' }
});

// 监视整个state对象的变化
watch(state, (newState) => {
  console.log('State changed:', newState);
});

// 修改内部属性会触发回调
state.user.name = 'Bob'; // 触发

2. 监视基本类型属性

  • 使用Getter函数:对于基本类型(如count),使用Getter函数确保正确追踪。

javascript

复制

watch(() => state.count, (newCount, oldCount) => {
  console.log(`Count changed: ${oldCount} → ${newCount}`);
});

state.count++; // 触发,输出: Count changed: 0 → 1

3. 监视对象类型属性

  • 需要深度监视:使用Getter函数返回对象属性,并显式设置deep: true以检测内部变化。

javascript

复制

watch(
  () => state.user,
  (newUser, oldUser) => {
    console.log('User changed:', newUser);
  },
  { deep: true } // 启用深度监视
);

state.user.name = 'Charlie'; // 触发
  • 替换对象时触发:即使未设置deep: true,替换整个对象也会触发。

javascript

复制

watch(() => state.user, (newUser) => {
  console.log('User replaced:', newUser);
});

state.user = { name: 'David' }; // 触发

4. 注意事项

  • 旧值问题:深度监视时,newValueoldValue指向同一对象,需通过其他方式获取旧值。

  • 直接监视响应式属性:避免直接监视属性(如watch(state.user, ...)),可能导致替换后失效。

总结

  • 整个对象:直接监视,自动深度。

  • 基本属性:使用Getter,无需deep

  • 对象属性:使用Getter + deep: true检测内部变化。

通过合理选择监视方式,可以高效追踪reactive对象及其嵌套属性的变化。

http://www.dtcms.com/a/122177.html

相关文章:

  • Java 设计模式:单例模式详解
  • 【算法笔记】并查集详解
  • 蚂蚁 Flink 实时计算编译任务 Koupleless 架构改造
  • 2025年港口危货储存单位主要安全管理人员备考练习题
  • JVM 不同的垃圾收集算法分别有什么优缺点?
  • 【AI】MCP概念
  • 安全理念和安全产品发展史
  • 整合线下资源视角下定制开发开源AI智能名片S2B2C商城小程序的应用研究
  • git 如何彻底删除已经提交到远程仓库的文件?而不是覆盖删除?git 如何删除已经提交到本地的文件?从历史记录中彻底清除彻底删除(本地+远程)
  • 汽车的四大工艺
  • TDengine 语言连接器(Python )
  • 达摩院Paraformer-ONNX模型:一站式高精度中文语音识别工业级解决方案
  • 物联网与边缘计算之物联网架构(感知层、网络层、应用层)
  • 什么是堆?深入理解堆数据结构及其应用
  • SSM智能停车场管理系统
  • 基于OpenCV的图像处理程序设计实践
  • dify使用知识库
  • 机器学习02——概要
  • Ansible的使用
  • Java面试黄金宝典44
  • Yalmip工具箱(3)——错误类型
  • SHAP 能帮我们精准看穿预测模型的因果关系吗?
  • NO.81十六届蓝桥杯备战|数据结构-Trie树-字典树-前缀树|于是他错误的点名开始了|最大异或对 The XOR Largest Pair(C++)
  • 汽车售后诊断 ODX 和 OTX 对比分析报告
  • JSX 中,`style` 和 `className` 是两种不同的样式控制方式
  • ctfshow——web入门186~190
  • Feign修仙指南:声明式HTTP请求的优雅之道
  • Java中23种设计模式之代理模式
  • Codeforces Round 970 (Div. 3)题解
  • 物联网与边缘计算之边缘计算节点设计与协议(MQTT、CoAP)