前端知识 - Vue3中的computed、watch、watchEffect

认识 computed
computed 是 Vue3 中用于创建计算属性的一个工具。计算属性允许您根据其他属性的值来计算出一个新的属性，就像 JavaScript 中的函数。使用 computed，您无需在 template 中编写复杂的表达式，而是可以使用计算属性来简化代码，让代码更加简洁和易于维护。

computed 的使用
让我们以一个姓名案例来理解 computed 的使用。假设我们有一个 firstName 和 lastName，我们需要计算出一个全名 fullName。在 Vue2 中，我们可能会这样写：

fullName() {
  return this.firstName + ' ' + this.lastName;
}

而在 Vue3 中，我们可以使用 computed 来简化代码：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

通过 computed，您只需在 template 中使用 fullName，就可以获取到全名，而无需在 template 中编写复杂的表达式。

认识 watch
watch 是 Vue3 中用于监听属性变化的一个工具。当被监听的属性发生变化时，watch 会触发一个函数，您可以在这个函数中执行一些操作。watch 非常适合您需要在属性变化时更新 UI 或执行某些操作的情况。

watch 的使用
让我们继续使用姓名案例来理解 watch 的使用。假设我们需要在 firstName 或 lastName 发生变化时，更新全名 fullName。在 Vue2 中，我们可能会这样写：

watch: {
  firstName(newValue, oldValue) {
    this.fullName = newValue + ' ' + this.lastName;
  },
  lastName(newValue, oldValue) {
    this.fullName = this.firstName + ' ' + newValue;
  }
}

而在 Vue3 中，我们可以使用 watch 简化代码：

watch: {
  firstName: {
    handler(newValue, oldValue) {
      this.fullName = newValue + ' ' + this.lastName;
    },
    immediate: true //立即执行一次
  },
  lastName: {
    handler(newValue, oldValue) {
      this.fullName = this.firstName + ' ' + newValue;
    },
    immediate: true //立即执行一次
  }
}

通过 watch，您只需在 watch 对象中定义被监听的属性及其对应的函数，就可以在属性发生变化时执行相应的操作。

认识 watchEffect
watchEffect 是 Vue3 中用于监听响应式数据变化的一个工具。它与 watch 类似，但 watchEffect 不会在组件初始化时立即执行，而是在响应式数据发生变化时才执行。watchEffect 非常适合您需要在响应式数据发生变化时执行一些操作的情况。

watchEffect 的使用
让我们继续使用姓名案例来理解 watchEffect 的使用。假设我们需要在 firstName 或 lastName 发生变化时，更新全名 fullName。在 Vue3 中，我们可以使用 watchEffect 简化代码：

watchEffect(() => {
  this.fullName = this.firstName + ' ' + this.lastName;
});

通过 watchEffect，您只需定义一个函数，就可以在响应式数据发生变化时执行相应的操作。

总结
computed、watch 和 watchEffect 都是 Vue3 中用于响应式编程的工具。它们都可以帮助您在数据发生变化时执行相应的操作，让您的应用程序更加响应和高效。