查看专栏目录: VUE ------ element UI

Vue.js 中的 watch 和 computed 都是用于监听数据变化并执行相应操作的选项，但它们的使用场景和优劣势有所不同。

两者区别

watch 用于监听一个或多个数据属性的变化，并在变化时执行相应的处理函数。 它可以是一个对象或一个函数。当 watch 是一个对象时，它的键是要监听的数据属性名，值是对应的处理函数。当 watch 是一个函数时，它接收两个参数：新值和旧值，返回一个布尔值表示是否继续监听该数据属性。

computed 用于根据依赖的数据属性计算出一个新的数据属性，并将其缓存起来。 当依赖的数据属性发生变化时，computed 会自动重新计算新的数据属性的值。computed 通常用于复杂的计算逻辑，可以提高性能和代码的可读性。

代码示例

演示了如何使用 watch 和 computed 选项：

<template>
  <div>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    firstName(newValue, oldValue) {
      console.log('First name changed from ' + oldValue + ' to ' + newValue);
    },
    lastName(newValue, oldValue) {
      console.log('Last name changed from ' + oldValue + ' to ' + newValue);
    }
  }
};
</script>

在这个示例中，我们使用 v-model 指令将输入框的值绑定到 firstName 和 lastName 数据属性上。然后，我们使用 computed 选项计算出 fullName 数据属性的值，并在模板中显示出来。同时，我们使用 watch 选项监听 firstName 和 lastName 数据属性的变化，并在其变化时输出日志信息。

需要注意的是，当使用 computed 选项时，如果依赖的数据属性没有发生变化，则不会重新计算新的数据属性的值，从而提高性能。而当使用 watch 选项时，无论依赖的数据属性是否发生变化，都会执行相应的处理函数。因此，在需要频繁更新的场景下，使用 watch 选项可能会导致性能问题。

总之，watch 和 computed 都是用于监听数据变化并执行相应操作的选项，但它们的使用场景和优劣势有所不同。在实际开发中，应根据具体需求选择合适的选项。