关于vue.js:vue3APIwatch

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