Vue3 watch 属性

在 Vue3 中，watch 属性用于监听 Vue 实例中某个数据的变化，并在数据变化时执行相应的回调函数。

watch 允许我们观察和响应 Vue 实例中特定数据的变化，从而执行一些副作用操作，比如更新 DOM、发起网络请求等。

2. watch 属性的基本用法

在 Vue3 中，watch 属性可以通过以下方式使用：

实例

import { ref, watch } from 'vue';

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

watch(count, (newValue, oldValue) => {
console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});

return {
count
};
}
};

3. 代码解释

在上述代码中：

首先，我们使用 ref 创建了一个响应式数据 count，并将其初始值设为 0。
然后，我们使用 watch 函数来监听 count 的变化。watch 接受两个参数：
- 第一个参数是我们要监听的数据（这里是 count）。
- 第二个参数是一个回调函数，当监听的数据变化时，这个回调函数会被触发。回调函数接收两个参数：
  - newValue：数据变化后的新值。
  - oldValue：数据变化前的旧值。

4. watch 属性的高级用法

除了监听单个数据，watch 还可以监听多个数据，或者监听一个复杂的表达式。

4.1 监听多个数据

实例

import { ref, watch } from 'vue';

export default {
setup() {
const firstName = ref('John');
const lastName = ref('Doe');

watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
console.log(`firstName 从 ${oldFirstName} 变为 ${newFirstName}`);
console.log(`lastName 从 ${oldLastName} 变为 ${newLastName}`);
});

return {
firstName,
lastName
};
}
};

在这个例子中，我们监听了 firstName 和 lastName 两个数据的变化。当它们中的任何一个发生变化时，回调函数都会被触发。

4.2 监听复杂表达式

实例

import { ref, watch } from 'vue';

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

watch(
() => user.value.age, // 监听 user.age 的变化
(newAge, oldAge) => {
console.log(`age 从 ${oldAge} 变为 ${newAge}`);
}
);

return {
user
};
}
};

在这个例子中，我们通过一个函数来监听 user.age 的变化。这种方式适用于监听对象中的某个属性。

5. watch 属性的选项

watch 函数还接受第三个参数，这是一个可选的配置对象，可以用来定制监听行为。

实例

import { ref, watch } from 'vue';

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

watch(count, (newValue, oldValue) => {
console.log(`count 从 ${oldValue} 变为 ${newValue}`);
}, {
immediate: true, // 立即执行回调函数
deep: true // 深度监听，适用于监听对象或数组
});

return {
count
};
}
};

immediate: true：表示在监听开始时立即执行回调函数，而不是等到数据变化时才执行。
deep: true：表示深度监听，适用于监听对象或数组的变化。

Vue3 选项式 API

返回顶部

菜鸟教程