Vue3 watch使用

在Vue 3中，监听数据变化主要有以下几种方式：官网👉🏻 侦听器 | Vue.js

监听一个ref

const count = ref(0);
watch(count, (newValue, oldValue) => {console.log(`count值从${oldValue}变成了${newValue}`);
});

监听一个reactive对象的属性

const state = reactive({ count: 0 });
watch(
() => state.count,
(newValue, oldValue) => {console.log(`count值从${oldValue}变成了${newValue}`);
});

监听多个数据源

watch(
[() => state.count, count], // 可以同时监听ref和reactive的属性
([newCount1, newCount2], [oldCount1, oldCount2]) => {// 处理变化
});

深度监听和立即执行

const state = reactive({person: { name: 'Alice',age: 30}
});watch(
() => state.person,
(newValue, oldValue) => {// 注意：对于对象或数组，新值和旧值相同，除非使用深度监听console.log('person变化了', newValue);
},
{ deep: true, immediate: true } // 深度监听，并且立即执行一次
);

使用watchEffect

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {console.log('count的值是：', count.value);
});// 停止监听：
const stop = watchEffect(() => {// ...
});

使用计算属性`computed`

import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
// 计算属性默认是只读的，如果需要可写，可以提供一个setter
const writableComputed = computed({get: () => count.value * 2,set: (val) => {count.value = val / 2;
}});

在Vue 3中，监听数据变化主要有以下几种方式：

1. 使用`watch`函数：用于监听单个或多个响应式数据源，并在数据变化时执行回调函数。

2. 使用`watchEffect`函数：立即执行传入的函数，并响应式追踪其依赖，当依赖变化时重新运行该函数。

3. 使用计算属性`computed`：当依赖的响应式状态发生变化时，计算属性会自动重新计算。

4. 使用`ref`和`reactive`创建的响应式变量：直接修改这些变量，视图会自动更新。