vue3中的watchEffect高级侦听器

介绍

watchEffect有两个参数，一个回调函数，一个是对象(设置配置项)

watchEffect执行传入的一个函数，同时响应式追踪其依赖，并在依赖更新时重新运行该函数

watchEffect是非惰性的，会默认自动调用一次的

 

import { watchEffect, ref } from 'vue'

let msg = ref<string>('炎夏')
let msg2 = ref<string>('九月')

watchEffect(() => {
    console.log('msg', msg.value);
    console.log('msg2', msg2.value);
})

 

清除副作用

可以接收一个回调函数，在触发侦听之前调用，也就是值发生改变之前

比如我们可以在下面例子中，接收一个命名为oninvalidate的回调函数

 

watchEffect((oninvalidate) => {
  oninvalidate(()=>{
      // 可以用来做处理防抖或者处理逻辑之类的操作
    // ...
  })
  console.log('msg', msg.value);
  console.log('msg2', msg2.value);
})

停止侦听

watchEffect返回一个函数，在调用这个函数之后，watchEffect就会停止侦听，不会再执行watchEffect里的相关代码操作

const stop = watchEffect((oninvalidate) => {
  oninvalidate(()=>{
      // 可以用来做处理防抖或者处理逻辑之类的操作
    // ...
  })
  console.log('msg', msg.value);
  console.log('msg2', msg2.value);
})

stop()

配置选项

watchEffect可以设置配置项

flush：用来设置更新时机，有三个值：

👉pre：组件更新前执行，

👉sync：强制效果始终同步触发，

👉post：组件更新之后执行(常用)

onTrigger：用来调试watchEffect

 

import { watchEffect, ref } from 'vue'

watchEffect((oninvalidate) => {
  oninvalidate(()=>{
    // ...
  })
  console.log('msg', msg.value);
  console.log('msg2', msg2.value);
},{
  flush: 'post',
  onTrigger(){
    debugger
  }
})