watchEffect函数官网介绍watchEffect图LRA[watchEffect函数]-->B[概念]B-->B1(什么是watchEffect?)A-->C[主要特征]C-->|1|C1（立即执行）C1-->C11（谁立即执行？）C-->|2|C2（响应式跟踪依赖）C-->|3|C3（停止监听）C3-->C31（Howtostop?)C3-->C32（什么时候停止？）C-->|4|C4（清除副作用）C-->|5|C5（附加选项）C5-->C51（选项值pre）C51-->C511（有什么影响？）C5-->C52（optionvaluepost）C52-->C521（有什么影响？）C-->|6|C6（监听调试）C6-->C61(onTrack)C6-->C62(onTrigger)watchEffect概念watchEffect是一个函数，它接受一个立即执行的函数，同时反应性地跟踪它的依赖关系，并在它的依赖关系发生变化时重新运行该函数。官网概念watchEffect特点1.立即执行watchEffect的回调函数，在组件初始化时立即执行2.响应式跟踪依赖（数据）下面代码：age的每一次值变化都会被watchEffect收集，watchEffect的回调函数会立即执行。让年龄=参考（5）；setTimeout(()=>{age.value=6;},1000);setTimeout(()=>{age.value=7;},2000);watchEffect(()=>{console.log('age'svalue',age.value);});//依次打印出567三个停止监听watchEffect，并在组件卸载时自动停止watchEffect。可显示调用返回值的实现：stoplisteningletage=ref(5);setTimeout(()=>{age.value=6;},1000);setTimeout(()=>{stopHandler();//stoplistening},1500);/*因为显示在1500ms停止监听，所以不会监听到值的变化，但是（实际上是更新了值，但是watchEffect并没有继续监听）*/setTimeout(()=>{age.value=7;},2000);letstopHandler=watchEffect(()=>{console.log('agevalue',age.value);});//打印结果：564Clearsideeffects根据官方文档介绍，清除sideeffect的触发条件：当监听器停止时，sideeffect将要重新执行letage=ref(5);setTimeout(()=>{age.value=6;},1000);setTimeout(()=>{age.value=7;},2000);letstopHandler=watchEffect((onInvalidate)=>{onInvalidate(()=>{console.log('onInvalidate');});console.log('年龄值',age.value);});在每次监听回调之前执行onInvalidate函数。/*age的值为5onInvalidateage的值为6onInvalidateage的值为7*/五个附加选项主要区别详见组件钩子更新顺序letnum=ref(1);setTimeout(()=>{num.value+=1;},1000);watchEffect(()=>{letb=num.value;console.log('welcomcomponent--watchEffect');},{//flush:'post'flush:'pre'//默认值});六、听力调试待补充...
