vue3API--watch vue.js

watch 【vue3API--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 = 'https://www.it610.com/article/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