Vue 3: 探索计算属性 (computed) 和侦听器 (watch) 的奥秘

2023-10-07 04:40:05

在之前的文章中，我们探索了 Vue 3 的一些激动人心的新特性，包括生命周期钩子和 setup() 函数。现在，我们将继续深入研究另外两个强大且实用的特性：计算属性 (computed) 和侦听器 (watch)。它们是 Vue.js 3.x 工具箱中的关键元素，可以帮助我们构建更强大、更响应的应用程序。

计算属性：高效数据访问

计算属性允许我们在 Vue 组件中定义动态的、依赖于其他数据属性的值。这些属性就像是一个缓存，当依赖的数据发生变化时，计算属性会自动更新其值，而无需重新渲染整个组件。这提高了应用程序的性能，尤其是在涉及到复杂计算或频繁更新的数据时。

举个例子，假设我们有一个组件，需要显示当前登录用户的姓名。我们可以定义一个计算属性 fullName，它将 firstName 和 lastName 两个数据属性的值组合起来。当 firstName 或 lastName 的值发生变化时，fullName 将自动更新，而无需重新渲染整个组件。

<script>
export default {
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

通过这种方式，我们可以轻松地访问和显示动态数据，而无需担心性能问题。

侦听器：响应数据变化

侦听器 (watch) 是另一个强大的工具，它允许我们在数据变化时执行特定的函数。我们可以使用 watch 方法来侦听任何数据属性的变化，并在值改变时触发相应的操作。

举个例子，假设我们有一个组件，需要在用户输入电子邮件地址时进行验证。我们可以使用 watch 来侦听 email 数据属性的变化，并在值改变时执行一个函数来验证电子邮件地址的有效性。

<script>
export default {
  watch: {
    email(newVal, oldVal) {
      if (!this.validateEmail(newVal)) {
        this.$emit('invalid-email');
      }
    }
  },
  methods: {
    validateEmail(email) {
      // 这里我们实现了一个简单的电子邮件验证函数
      return /\S+@\S+\.\S+/.test(email);
    }
  }
};
</script>