首页
/ 正文

Vue3 watch 属性（建议收藏）

更新时间: 2025-04-20 10:46:42

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

前言

在 Vue 开发中，数据驱动视图更新的核心机制是响应式系统。而 watch 属性作为这一系统的重要组成部分，能够帮助开发者监控特定数据的变化，并在变化发生时触发自定义逻辑。无论是表单验证、数据校验，还是复杂业务场景的联动操作，watch 都是不可或缺的工具。本文将从基础到进阶，结合实例深入解析 Vue3 中的 watch 属性，帮助开发者掌握其核心用法与最佳实践。

一、理解 Watch 的核心概念

1.1 响应式系统的“观察者”角色

Vue 的响应式系统通过 Proxy（Vue3）或 Object.defineProperty（Vue2）实现数据变化的追踪。而 watch 可以看作是这个系统中的“观察者”——它主动监听某个数据源的变化，并在变化时执行预设的回调函数。

比喻：如果将响应式系统比作一座城市，数据是街道上的行人，那么 watch 就像是街道边的监控摄像头，当行人（数据）移动时，摄像头（watch）会记录这一变化并触发警报（回调函数）。

1.2 Watch 与 Data 的关系

watch 并非直接修改数据，而是通过监听数据的变化来触发操作。例如，当用户输入表单内容时，watch 可以监听输入框的 v-model 绑定值，并在输入完成后执行表单验证。

二、基础用法：从简单到复杂

2.1 监听单个响应式属性

使用 watch 监听单个属性的语法如下：

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(
      () => count.value,
      (newVal, oldVal) => {
        console.log('Count changed from', oldVal, 'to', newVal);
      }
    );

    return { count };
  }
};

关键点：

监听函数需要返回被监听的响应式数据（如 count.value）。
回调函数接收 newVal 和 oldVal 两个参数，方便对比变化前后的值。

2.2 监听多个属性

若需同时监听多个属性，可将监听函数包装为一个返回对象或数组的形式：

const name = ref('');
const age = ref(0);

watch(
  () => ({ name: name.value, age: age.value }),
  (newValues, oldValues) => {
    console.log('User info updated:', newValues);
  }
);

2.3 立即执行的监听

通过 immediate 选项，可以让 watch 在初始化时立即触发回调：

watch(
  () => count.value,
  (newVal) => {
    // ...
  },
  { immediate: true }
);

三、进阶技巧：深度监听与异步操作

3.1 深度监听对象或数组

当监听复杂对象（如对象或数组）时，默认情况下 watch 只会检测引用地址是否变化，而非内部属性。此时需开启 deep 选项：

const user = ref({ name: 'Alice', age: 25 });

watch(
  () => user.value,
  (newUser, oldUser) => {
    console.log('User object updated');
  },
  { deep: true }
);

注意事项：

深度监听会显著增加性能开销，应仅在必要时使用。
对于大型对象，可考虑使用 watchEffect 或手动拆分监听逻辑。

3.2 异步更新与防抖

结合异步操作时，例如搜索框的输入延迟处理，可以利用 watch 的回调函数结合 setTimeout 或防抖函数：

import { debounce } from 'lodash';

const searchQuery = ref('');

watch(
  () => searchQuery.value,
  (query) => {
    debounce(() => {
      fetchResults(query);
    }, 300);
  }
);

3.3 自定义触发条件

通过 flush 选项控制回调的触发时机（'pre' 或 'post'），或使用 onTrack/onTrigger 进行调试：

watch(
  () => count.value,
  () => {
    // ...
  },
  {
    flush: 'post', // 在 DOM 更新后触发
    onTrack(e) {
      console.log('Tracking:', e);
    }
  }
);

四、实战案例：Watch 的典型应用场景

4.1 表单联动验证

在表单场景中，watch 可以联动多个输入字段的校验逻辑：

<template>
  <input v-model="email" placeholder="Email" />
  <input v-model="password" placeholder="Password" />
  <button :disabled="!isFormValid">Submit</button>
</template>

<script setup>
import { ref, watch } from 'vue';

const email = ref('');
const password = ref('');
const isFormValid = ref(false);

watch([email, password], ([newEmail, newPassword]) => {
  isFormValid.value = 
    newEmail.includes('@') && newPassword.length >= 6;
});
</script>

4.2 动态路由参数监听

在路由跳转时，监听 route 对象的参数变化以更新页面内容：

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    watch(
      () => route.params.id,
      (newId) => {
        fetchDataById(newId);
      }
    );
  }
};

4.3 实时数据监控

在后台管理系统中，监控 API 数据变化并触发通知：

import { watch } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    watch(
      () => store.state.userList,
      (newList) => {
        notifyAdmin('User list updated');
      },
      { deep: true }
    );
  }
};

五、对比 Vue2 的 Watch 用法

5.1 语法差异

Vue2 中 watch 是选项式的 API，而 Vue3 通过 watch 函数实现，结合 Composition API 更灵活：

Vue2：

watch: {
  count(newVal, oldVal) {
    // ...
  }
}

Vue3：

watch(() => count.value, (newVal, oldVal) => { /* ... */ });

5.2 默认行为差异

Vue3 的 watch 默认在 DOM 更新后触发（flush: 'post'），而 Vue2 默认在更新前触发（flush: 'pre'）。

六、最佳实践与性能优化

6.1 避免过度使用 Watch

当只需简单响应数据变化时，优先使用 computed 或 watchEffect，而非 watch：

// 用 computed 替代简单计算
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

// 用 watchEffect 替代无需参数的监听
watchEffect(() => {
  console.log('name changed:', name.value);
});

6.2 按需开启深度监听

仅在对象/数组内部属性变化时才启用 deep: true，并尽量拆分复杂对象为独立响应式变量。

6.3 清理副作用

若 watch 回调中存在定时器或订阅，需通过返回函数进行清理：

watch(
  () => searchQuery.value,
  (query) => {
    const timer = setTimeout(() => {
      searchAPI(query);
    }, 300);

    return () => clearTimeout(timer);
  }
);

结论

Vue3 的 watch 属性是构建动态交互的核心工具，其灵活性和强大功能使其适用于从简单表单验证到复杂数据监控的各类场景。通过合理配置 immediate、deep 等选项，并结合 Composition API 的语法特性，开发者可以高效地实现响应式逻辑。

在实际开发中，建议优先选择最简洁的解决方案（如 computed 或 watchEffect），并在必要时使用 watch 处理复杂变化逻辑。通过本文的案例与技巧，读者应能快速掌握 Vue3 watch 属性 的核心用法，并将其融入自己的项目中，提升代码的健壮性和可维护性。

（全文约 1800 字）

Vue3 watch 属性（建议收藏）

前言

一、理解 Watch 的核心概念

1.1 响应式系统的“观察者”角色

1.2 Watch 与 Data 的关系

二、基础用法：从简单到复杂

2.1 监听单个响应式属性

2.2 监听多个属性

2.3 立即执行的监听

三、进阶技巧：深度监听与异步操作

3.1 深度监听对象或数组

3.2 异步更新与防抖

3.3 自定义触发条件

四、实战案例：Watch 的典型应用场景

4.1 表单联动验证

4.2 动态路由参数监听

4.3 实时数据监控

五、对比 Vue2 的 Watch 用法

5.1 语法差异

5.2 默认行为差异

六、最佳实践与性能优化

6.1 避免过度使用 Watch

6.2 按需开启深度监听

6.3 清理副作用

结论

最新发布

Cursor 集成终端（手把手讲解）

IGMP 协议（保姆级教程）

GGP 协议（千字长文）

vue3 createApp() 函数（超详细）

vue3 createSSRApp() 函数（长文讲解）

Vue3 app.mount() 函数（保姆级教程）

Vue3 app.unmount() 函数（手把手讲解）

Vue3 app.onUnmount() 函数（长文解析）

Vue3 app.component() 函数（超详细）

Vue3 app.directive() 函数（建议收藏）