当前位置: 首页 > Web前端 > vue.js

vue3API--watch

时间:2023-03-31 15:58:31 vue.js

watch官网概念图LRA[watch]-->B[function]A[watch]-->C[feature]A[watch]-->D[sharedbehaviorwithwatchEffect]B-->B1(监听单个数据源)B-->B2(监听多个数据源)C-->|1|C1(延迟执行回调函数)C1-->C12(只监听数据源发生变化)callback只有在以下情况下才会被触发)C-->|2|C2(清除监听器触发的条件和时机)C2-->C21(触发条件:监听的数据源)C2-->C22(触发时机:监控数据源变化)C-->|3|C3(可以访问监控数据源前后的值)第一个参数:指定的数据源第二个参数:当指定的数据源发生变化时回调letcolor=ref('红色的');//定义一个数据源setTimeout(()=>{color.value='blue';//改变数据源},1000);写法1//watch(//()=>color.value,//(newValue,oldValue)=>{//console.log('newValue:',newValue);//console.log('oldValue:',oldValue);//}//);Writing2watch(color,(newValue,oldValue)=>{console.log('newValue:',newValue);console.log('oldValue:',oldValue);});//上面的打印结果:newValue:blueoldValue:red