watch和watchEffect的区别和用法

watch和watchEffect都是Vue 3中的响应式API中的监听器，它们的作用都是监听数据的变化并执行相应的回调函数。它们的区别主要有以下几点：

1.传入的参数不同：watch需要传入要监听的数据和回调函数，而watchEffect只需要传入回调函数。

2.依赖收集方式不同：watch需要手动传入要监听的数据，而watchEffect会自动收集回调函数中使用到的响应式数据作为依赖。

3.回调函数执行时机不同：watch在监听的数据变化时执行回调函数，而watchEffect在初始化时会执行一次回调函数，并在依赖变化时再次执行。

使用方法：

watch的使用方法如下：

import { watch, reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'zs'
})

watch(() => state.count, (newValue, oldValue) => {
  console.log(`count变化了，新值为${newValue}，旧值为${oldValue}`)
})

watchEffect的使用方法如下：

import { watchEffect, reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'zs'
})

watchEffect(() => {
  console.log(state.count)
  console.log(state.name)
})