vue3API--watch

watch

官网概念

 graph LR
A[watch] -->B[作用]
A[watch] -->C[特点]
A[watch]--> D[与watchEffect的共享行为]

B-->B1(侦听单个数据源)
B-->B2(侦听多个数据源)
C--> |1|C1(懒惰执行回调函数)
C1--> C12(只有被监听的数据源改变时才会触发回调)
C--> |2|C2(明确了侦听器触发的条件和时机)
C2--> C21(触发条件:被监听的数据源)
C2--> C22(触发时机:被监听的数据源发生改变)
C--> |3|C3(可访问被监听数据源发生变化前后的值)

• 第一个参数：指定的数据源
• 第二个参数：指定数据源发生变化时的回调

let color = ref('red'); // 定义一个数据源

setTimeout(() => {
    color.value = 'blue'; // 改变数据源
}, 1000);

写法一
// watch(
//     () => color.value,
//     (newValue, oldValue) => {
//         console.log('newValue:', newValue);
//         console.log('oldValue:', oldValue);
//     }
// );

写法二
watch(color, (newValue, oldValue) => {
    console.log('newValue:', newValue);
    console.log('oldValue:', oldValue);
});

// 上述打印结果：
newValue: blue
oldValue: red