引导者## Vue 侦听属性 (`watch` 和 `watchEffect`)### 简介在 Vue.js 中，组件的数据变化通常会驱动视图更新。但有时，我们需要在数据变化时执行一些额外的逻辑，例如：- 数据校验 - 发送异步请求 - 更新 DOM 元素Vue 提供了两种方式来侦听组件数据的变化：
`watch` 属性
和
`watchEffect` 函数
。### 1. `watch` 属性`watch` 属性允许我们指定一个函数，该函数会在指定的
一个或多个
数据源发生变化时执行。#### 1.1 基本用法`watch` 属性接收一个对象，对象的键是需要侦听的数据源 (可以是组件的 `data`、`props` 或 `computed` 属性)，值是回调函数。```vue
Name: {{ name }}
`immediate: true`
: 在组件实例化时立即执行一次回调函数。 -
`deep: true`
: 进行深度监听，当监听对象内部属性发生变化时也会触发回调函数。```vue watch: {user: {handler(newValue, oldValue) {console.log('User object changed:', newValue)},deep: true,immediate: true} } ```### 2. `watchEffect` 函数`watchEffect` 函数会在其依赖的数据源发生变化时
自动
执行回调函数。#### 2.1 基本用法`watchEffect` 函数接收一个回调函数作为参数：```vue
Count: {{ count }}
Vue 侦听属性 (`watch` 和 `watchEffect`)
简介在 Vue.js 中，组件的数据变化通常会驱动视图更新。但有时，我们需要在数据变化时执行一些额外的逻辑，例如：- 数据校验 - 发送异步请求 - 更新 DOM 元素Vue 提供了两种方式来侦听组件数据的变化：**`watch` 属性** 和 **`watchEffect` 函数**。
1. `watch` 属性`watch` 属性允许我们指定一个函数，该函数会在指定的**一个或多个**数据源发生变化时执行。
1.1 基本用法`watch` 属性接收一个对象，对象的键是需要侦听的数据源 (可以是组件的 `data`、`props` 或 `computed` 属性)，值是回调函数。```vue
Name: {{ name }}
1.2 侦听多个数据源可以使用数组来侦听多个数据源:```vue watch: {name: [(newValue, oldValue) => {console.log('Name changed:', newValue);},'anotherMethod' ],age(newValue) {console.log('Age changed:', newValue);} } ```
1.3 配置选项`watch` 属性还可以接收一个对象作为第二个参数，用于配置监听器的行为：- **`immediate: true`**: 在组件实例化时立即执行一次回调函数。 - **`deep: true`**: 进行深度监听，当监听对象内部属性发生变化时也会触发回调函数。```vue watch: {user: {handler(newValue, oldValue) {console.log('User object changed:', newValue)},deep: true,immediate: true} } ```
2. `watchEffect` 函数`watchEffect` 函数会在其依赖的数据源发生变化时**自动**执行回调函数。
2.1 基本用法`watchEffect` 函数接收一个回调函数作为参数：```vue
Count: {{ count }}
2.2 停止侦听`watchEffect` 返回一个停止监听的函数：```vue const stop = watchEffect(() => { // ... })// 停止监听 stop() ```
2.3 `watch` 和 `watchEffect` 的区别- `watch` 需要明确指定要侦听的数据源，而 `watchEffect` 会自动收集依赖。 - `watch` 更适合处理已知数据源的变化，而 `watchEffect` 更适合处理副作用和异步操作。
总结`watch` 和 `watchEffect` 是 Vue.js 中非常实用的特性，它们允许我们对组件数据的变化做出响应，从而实现更复杂的逻辑和交互效果。
