computed 和 watch 对比，哪个才是你的 JavaScript 数据最佳守护者

在 JavaScript 中，computed 和 watch 是两个非常有用的工具，可以帮助您管理和响应数据的变化。computed 属性是一个计算值，它根据其他属性的值计算得出，并且在其他属性的值发生变化时自动更新。watch 属性是一个观察器，它可以监控其他属性的值，并在这些值发生变化时执行回调函数。

computed 属性非常适合用于计算不会经常发生变化的值，例如一个人的全名或一个购物车的总价。watch 属性非常适合用于监听属性的变化并执行相应的操作，例如在用户输入表单时验证输入的有效性。

下面是一个例子，演示了如何使用 computed 属性来计算一个人的全名：

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

在这个例子中，fullName 属性是一个计算值，它根据 firstName 和 lastName 属性的值计算得出。当 firstName 或 lastName 属性的值发生变化时，fullName 属性的值也会自动更新。

下面是一个例子，演示了如何使用 watch 属性来监听一个输入字段的值并执行相应的操作：

watch(
  () => {
    return inputValue.value;
  },
  (newValue, oldValue) => {
    if (newValue.length < 3) {
      errorMessage.value = '输入值太短';
    } else {
      errorMessage.value = '';
    }
  }
);

在这个例子中，watch 属性被用来监听 inputValue 属性的值。当 inputValue 属性的值发生变化时，watch 属性就会执行回调函数。回调函数检查输入值的长度，如果输入值的长度小于 3，则显示错误信息，否则隐藏错误信息。

computed 属性和 watch 属性都是非常有用的工具，可以帮助您管理和响应数据的变化。根据您的具体需求，您可以选择使用 computed 属性或 watch 属性来实现您的目标。

computed 和 watch 的区别

computed 和 watch 是 Vue.js 中两个常用的特性，它们都与响应式数据相关，但它们在使用场景和工作方式上存在一些差异。

computed

• computed 是计算属性，用来计算一个属性的值。
• 调用的时候不需要加括号，可以直接当属性来用。
• 根据依赖自动缓存，依赖不变的时候，值不会重新计算。
• computed 的 getter 和 setter 都可以是函数。

watch

• watch 是观察器，用来监听其他属性的值。
• 当被监听的属性的值发生变化时，watch 会执行回调函数。
• watch 的回调函数可以有三个参数：当前值、旧值和回调函数的上下文对象。

computed 和 watch 的使用场景

• computed 非常适合用于计算不会经常发生变化的值，例如一个人的全名或一个购物车的总价。
• watch 非常适合用于监听属性的变化并执行相应的操作，例如在用户输入表单时验证输入的有效性。

结论

computed 和 watch 都是非常有用的工具，可以帮助您管理和响应数据的变化。根据您的具体需求，您可以选择使用 computed 属性或 watch 属性来实现您的目标。