Vue3 watchEffect 的使用

27 min read
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){
    let msgData = '';
    let person = reactive({
      name:'大狗',
      age:18
    })
   
    watchEffect(()=>{
      console.log('name',person)
    })
    const editName = ()=>{
      person.age++
    }
    return {
      updateData,
      ...toRefs(person),
      editName
      
    }
  }
}

自动收集依赖

不需要指定需要监听的数据，会自动监听回调函数中的响应式数据，初始化时会立刻执行

watchEffect(() => {
  console.log('watchEffect', obj, num)
})

停止监听

const stop = watchEffect(() => {
  console.log('watchEffect', obj, num)
})

const handleSuspend = () => {
  stop() // 停止监听
}

清除函数

Vue3的watchEffect侦听副作用传入的函数可以接收一个 onInvalidate 函数作为入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：

  • 副作用即将重新执行时（即依赖的值改变）
  • 侦听器被停止 (通过显示调用返回值停止侦听，或组件被卸载时隐式调用了停止侦听)
import { watchEffect, ref } from 'vue'

const count = ref(0)
watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  count.value++
}, 1000)

是不是和 React 的 useEffect 用法很相似呢

import { useEffect } from 'react'

useEffect(() => {
  window.addEventListener('click', handleClick)
  return () => {
    window.removeEventListener('click', handleClick)
  }
}, [])