三)vue3中watchEffect 和 watch的区别

在Vue 3中，watchEffect 和 watch 都用于监听数据的变化，但它们的使用方式和效果有所不同。具体区别如下：

1. watchEffect

watchEffect 是 Vue 3 中新增的 API，用于监听响应式数据的变化，并在回调函数中执行相应的操作。watchEffect 的特点是自动依赖追踪，只要在回调函数中访问了响应式数据，它就会自动追踪这些数据，并在数据变化时自动触发回调函数。watchEffect 适合处理简单的响应式数据变化，比如计算属性、数据过滤等。

示例代码：

import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log(`count: ${state.count}`)
})

2. watch

watch 是 Vue 2 中就有的 API，在 Vue 3 中也得到了保留。watch 用于监听指定的响应式数据及其嵌套属性的变化，并在回调函数中执行相应的操作。watch 需要手动指定需要监听的数据，可以通过设置 deep 选项来深度监听嵌套属性的变化，也可以设置 immediate 选项来在初始值被设置时立即执行回调函数。watch 适合处理复杂的响应式数据变化，比如异步请求、表单验证等。

示例代码：

import { reactive, watch } from 'vue'

const state = reactive({
  count: 0
})

watch(() => state.count, (newVal, oldVal) => {
  console.log(`count: ${newVal}`)
})

总之，watchEffect 和 watch 都是 Vue 3 中用于监听响应式数据变化的 API，但它们的使用场景和效果有所不同，需要根据实际需求选择使用。