Vue 3 Watch vs WatchEffect 深度监听实践
在Vue 3中，响应式系统得到了极大的改进，引入了Composition API，这使得开发者可以更加灵活地使用响应式数据。其中，`watch`和`watchEffect`是两个常用的响应式监听工具，它们可以用来深度监听数据的变化。本文将围绕这两个工具，通过实践代码来展示如何在Vue 3中使用它们进行深度监听。
前言
在Vue 2中，我们通常使用`watch`来监听数据的变化。Vue 3引入了`watchEffect`，它是一个更简洁的监听方式，可以自动收集依赖。本文将比较`watch`和`watchEffect`的使用，并通过实例代码展示如何进行深度监听。
1. watch
`watch`是一个函数，它接受一个源（source）和一个回调函数（callback）。当源中的数据发生变化时，回调函数会被调用。`watch`函数还接受一个选项对象，可以配置一些高级功能，如立即执行、深度监听等。
1.1 基本用法
以下是一个使用`watch`进行深度监听的例子：
javascript
<template>
<div>
<input v-model="obj.name" />
<input v-model="obj.age" type="number" />
<p>{{ obj }}</p>
</div>
</template>
<script>
import { reactive, watch } from 'vue';
export default {
setup() {
const obj = reactive({
name: 'Alice',
age: 25
});
watch(obj, (newVal, oldVal) => {
console.log('Object changed:', newVal);
}, {
deep: true
});
return {
obj
};
}
};
</script>
在这个例子中，我们创建了一个响应式对象`obj`，并使用`watch`来监听它的变化。通过设置`deep: true`，我们可以深度监听对象内部属性的变化。
1.2 立即执行
有时候，我们可能希望在组件初始化时立即执行回调函数。可以通过设置`immediate: true`来实现：
javascript
watch(obj, (newVal, oldVal) => {
console.log('Object changed:', newVal);
}, {
deep: true,
immediate: true
});
2. watchEffect
`watchEffect`是一个自动收集依赖的函数，它接受一个回调函数。每当回调函数的依赖发生变化时，`watchEffect`会重新执行回调函数。
2.1 基本用法
以下是一个使用`watchEffect`进行深度监听的例子：
javascript
<template>
<div>
<input v-model="obj.name" />
<input v-model="obj.age" type="number" />
<p>{{ obj }}</p>
</div>
</template>
<script>
import { reactive, watchEffect } from 'vue';
export default {
setup() {
const obj = reactive({
name: 'Alice',
age: 25
});
watchEffect(() => {
console.log('Object changed:', obj);
});
return {
obj
};
}
};
</script>
在这个例子中，`watchEffect`会自动收集`obj`的依赖，并在`obj`发生变化时重新执行回调函数。
2.2 暂停和恢复
`watchEffect`提供了一个`stop`方法，可以用来暂停和恢复监听：
javascript
let stop;
watchEffect(() => {
console.log('Object changed:', obj);
stop = () => {
console.log('Watch effect stopped');
};
});
// 暂停监听
stop();
// 恢复监听
stop();
3. 总结
在Vue 3中，`watch`和`watchEffect`都是强大的响应式监听工具。`watch`提供了更多的配置选项，而`watchEffect`则更加简洁。根据实际需求，我们可以选择使用它们中的任何一个来进行深度监听。
本文通过实例代码展示了如何在Vue 3中使用`watch`和`watchEffect`进行深度监听，希望对您有所帮助。在实际开发中，合理运用这些工具可以提高代码的可读性和可维护性。
Comments NOTHING