一、watch
watch是Vue.js提供的一个API，它可以用来监听数据对象、嵌套属性或者数组中某个元素的变化。watch有以下几个特点：
-
需要明确指定需要监听的数据对象或者属性值。
-
需要手动触发回调函数，也就是说仅当监听的数据发生改变时才会执行回调函数。
下面是一个使用watch监听数据变化的例子：
data() {
return {
message: 'Hello Vue.js!'
}
},
watch: {
message: function(newVal, oldVal) {
console.log('new value:', newVal)
console.log('old value:', oldVal)
}
}
在上述代码中，我们定义了一个data对象，其中包含一个message属性。接着，我们通过watch API来监听message属性的变化，并在message发生变化时打印出新旧值。
二、watchEffect
watchEffect是Vue.js 3.0引入的新API，它可以用来监听响应式数据的变化，并在每次变化后自动执行回调函数。相比watch，watchEffect有以下几个特点：
-
不需要明确指定需要监听的数据对象或者属性值，watchEffect会自动检测响应式数据的变化。
-
在监听到数据变化后，watchEffect会立即执行回调函数，不需要手动触发。
下面是一个使用watchEffect监听数据变化的例子：
import { watchEffect, reactive } from 'vue'
const state = reactive({
message: 'Hello Vue.js!'
})
watchEffect(() => {
console.log('message:', state.message)
})
在上述代码中，我们定义了一个state对象，并使用reactive API将其转换为响应式数据。接着，我们通过watchEffect来监听state对象中某个属性的变化，并在每次变化后打印出新的属性值。
三、watch和watchEffect的区别
- 使用方式不同
watch需要明确指定需要监听的数据对象或者属性值，而watchEffect会自动检测响应式数据的变化。
- 执行时机不同
watch需要手动触发回调函数，也就是说仅当监听的数据发生改变时才会执行回调函数；而watchEffect会立即执行回调函数，并在每次数据变化后再次执行。
- 功能不同
watch可以用来监听对象、嵌套属性或者数组中某个元素的变化，并在数据变化后执行回调函数；而watchEffect则可以监听任意响应式数据的变化，并在每次变化后自动执行回调函数。
四、总结
watch和watchEffect都是Vue.js提供的用于监听数据变化的API，它们虽然有些相似，但在使用方式、执行时机和功能方面还是存在一定的区别。通常来说，如果我们需要监听某个具体的属性或者对象，可以使用watch；而如果我们需要监听任意响应式数据的变化，并在每次变化后自动执行回调函数，可以使用watchEffect。
