在Vue.js框架中，watch、computed和watchEffect都用于响应数据的变化执行特定的操作，但它们之间有明显的区别：
computed：是一个依赖于其他响应式属性的属性，它是基于它的依赖进行缓存的，只有当依赖发生变化时，才会重新计算。
// Vue 2.x
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
// Vue 3.x
import { computed, ref } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => firstName.value + ' ' + lastName.value)
watch：用于观察特定响应式属性的变化，并执行相应的异步操作或者代码块。
// Vue 2.x
watch: {
firstName: function (val) {
console.log('First Name changed!', val)
}
}
// Vue 3.x
import { watch, ref } from 'vue'
const firstName = ref('John')
watch(firstName, (newVal, oldVal) => {
console.log('First Name changed!', newVal, oldVal)
})
watchEffect：它不依赖于特定的响应式属性，而是当响应式属性发生变化时，它会自动执行一段副作用代码。
// Vue 2.x
watchEffect: function () {
console.log('Full Name is: ' + this.firstName + ' ' + this.lastName)
}
// Vue 3.x
import { watchEffect, ref } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
watchEffect(() => {
console.log('Full Name is: ' + firstName.value + ' ' + lastName.value)
})
总结：computed是基于依赖进行的计算，watch用于观察响应式属性的变化，而watchEffect则是自动执行无目标的副作用代码。