vue3API /watch

1.watch侦听

在 Vue 3 中，watch 是一个用于观察和响应 Vue 实例上的数据变动的函数。它可以用来观察几乎所有类型的数据，包括 ref、reactive、响应式对象的属性，甚至是计算属性。当被观察的数据变化时，watch 会触发一个回调函数。

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

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});
</script>

特点

• 立即执行：watch 会在开始观察时立即执行一次回调函数，除非你设置 { immediate: false }。

• 停止观察：watch 返回一个停止观察的函数，你可以在组件卸载或其他适当的时候调用它来停止观察。

• 支持复杂表达式：watch 可以接受一个返回值作为观察的目标，这允许你观察更复杂的表达式或多个源。

高级用法

观察多个源

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

const firstName = ref('Jane');
const lastName = ref('Doe');

watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
  console.log(`Name changed from ${oldFirstName} ${oldLastName} to ${newFirstName} ${newLastName}`);
});
</script>

观察对象的属性

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

const person = reactive({
  name: 'John',
  age: 30
});

watch(() => person.name, (newName, oldName) => {
  console.log(`Name changed from ${oldName} to ${newName}`);
});

watch(() => person.age, (newAge, oldAge) => {
  console.log(`Age changed from ${oldAge} to ${newAge}`);
});
</script>

停止观察

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

const count = ref(0);

const stopWatching = watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

onUnmounted(() => {
  stopWatching(); // 组件卸载时停止观察
});
</script>

注意事项

• 避免在回调中直接修改被观察的数据：这可能会导致无限循环或难以追踪的错误。

• 使用 { immediate: true }：如果你需要在开始观察时立即触发回调，可以设置 { immediate: true }。

• 清理资源：使用 watch 创建的副作用（如定时器、订阅等）应该在组件卸载时清理，以避免内存泄漏。

指定观察

watch 函数可以接受一个或多个响应式引用、计算属性或是一个返回响应式数据的函数作为第一个参数。你可以观察单个数据源，也可以同时观察多个数据源。

观察单个数据源

import { ref, watch } from 'vue';

const state = ref(0);

watch(state, (newValue, oldValue) => {
  console.log(`Value changed from ${oldValue} to ${newValue}`);
});

观察多个数据源

import { ref, watch } from 'vue';

const firstName = ref('Jane');
const lastName = ref('Doe');

watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
  console.log(`Name changed from ${oldFirstName} ${oldLastName} to ${newFirstName} ${newLastName}`);
});

深度观察

默认情况下，watch 仅观察对象的顶层数据。如果你需要观察一个对象的深层属性变化，你可以使用 { deep: true } 选项来进行深度观察。

import { reactive, watch } from 'vue';

const person = reactive({
  name: 'John Doe',
  details: {
    age: 30,
    address: '123 Main St'
  }
});

watch(() => person.details, (newDetails, oldDetails) => {
  console.log(`Details changed`, newDetails);
}, { deep: true });