vue3 watch用法

Vue3中的watch API与Vue2中的watch API使用方式有所不同。Vue3中的watch API提供了两种使用方式：基于函数的watch和基于API的watch。

1. 基于函数的watch

基于函数的watch使用方式与Vue2中的watch API类似。需要在组件中使用$watch API，并传入一个函数作为watch的回调函数。当被监听的数据发生变化时，回调函数会被触发。

import { watch, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watch(() => state.count, (newVal, oldVal) => {
      console.log(`count的值从${oldVal}变成了${newVal}`)
    })

    return {
      state
    }
  }
}

2. 基于API的watch

基于API的watch使用方式与基于函数的watch有所不同。需要调用组件实例的watch API，并传入被监听的数据和回调函数。

import { onMounted, watchEffect, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

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

    watchEffect(() => {
      console.log(`count的值为${count.value}`)
    })

    return {
      count
    }
  }
}

基于API的watch还支持一些高级用法，如监听多个数据、设置监听的深度、设置监听的类型等，具体可以参考Vue3文档。