[vue2/vue3] 详细剖析watch、computed、watchEffect的区别，原理解读

在Vue.js框架中，watch、computed和watchEffect都用于响应数据的变化执行特定的操作，但它们之间有明显的区别：

1. 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)

2. 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)
})

3. 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则是自动执行无目标的副作用代码。