watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
如果用到message 就只会监听message 就是用到几个监听几个 而且是非惰性 会默认调用一次

  1. let message = ref<string>('')
  2. let message2 = ref<string>('')
  3.  watchEffect(() => {
  4.     //console.log('message', message.value);
  5.     console.log('message2', message2.value);
  6. })

清除副作用

就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

  1. import { watchEffect, ref } from 'vue'
  2. let message = ref<string>('')
  3. let message2 = ref<string>('')
  4.  watchEffect((oninvalidate) => {
  5.     //console.log('message', message.value);
  6.     oninvalidate(()=>{
  8.     })
  9.     console.log('message2', message2.value);
  10. })

停止跟踪 watchEffect 返回一个函数 调用之后将停止更新

  1. const stop =  watchEffect((oninvalidate) => {
  2.     //console.log('message', message.value);
  3.     oninvalidate(()=>{
  5.     })
  6.     console.log('message2', message2.value);
  7. },{
  8.     flush:"post",
  9.     onTrigger () {
  11.     }
  12. })
  13. stop()

更多的配置项
副作用刷新时机 flush 一般使用post
pre sync post
更新时机 组件更新前执行 强制效果始终同步触发 组件更新后执行
onTrigger 可以帮助我们调试 watchEffect

  1. import { watchEffect, ref } from 'vue'
  2. let message = ref<string>('')
  3. let message2 = ref<string>('')
  4.  watchEffect((oninvalidate) => {
  5.     //console.log('message', message.value);
  6.     oninvalidate(()=>{
  8.     })
  9.     console.log('message2', message2.value);
  10. },{
  11.     flush:"post",
  12.     onTrigger () {
  14.     }
  15. })

————————————————
版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/122802130