从基础到精通：Vue 计算属性（computed）和侦听器（watch）深入剖析

2023-11-28 00:12:38

计算属性和侦听器：Vue.js 中数据管理的神奇搭档

想象一下一个动态、响应迅速的 web 应用程序，它能随着你的输入瞬间调整。Vue.js 为你提供了两个强大的工具来实现这一切——计算属性 和侦听器 。在本文中，我们将深入探讨这两个概念，了解它们的异同，以及如何巧妙地利用它们来提升你的 Vue.js 应用。

计算属性

计算属性就像数据的神奇变压器，它们允许你从其他响应式数据派生出新的值。例如，如果你有一个 firstName 和 lastName 的输入，你可以创建一个计算属性 fullName 来合并它们。计算属性使用一个特殊函数定义，如下所示：

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

计算属性的妙处在于它们是缓存的，只会在相关依赖（在本例中为 firstName 和 lastName）发生变化时重新计算。这意味着性能优化，尤其是在数据大量更新的情况下。

侦听器

侦听器是响应式数据的守卫，它们会监视任何变化并采取行动。它们的工作原理很简单：指定一个响应式数据，以及当该数据发生变化时要执行的函数。以下是一个监听 firstName 变化的示例：

watch: {
  firstName: function(newValue, oldValue) {
    // 在 firstName 发生变化时执行此函数
  }
}

侦听器为各种功能打开了大门，例如表单验证、自动保存和实时更新。

计算属性与侦听器的差异

虽然计算属性和侦听器都是为了响应式数据管理而设计的，但它们之间存在着关键差异：

缓存 vs. 即时更新： 计算属性是缓存的，只会在依赖发生变化时重新计算，而侦听器在每次响应式数据变化时都会触发。
模板使用： 计算属性可以像普通数据一样在模板中使用，而侦听器不能。
依赖关系： 计算属性可以作为其他计算属性的依赖，而侦听器不能。

什么时候使用计算属性？

计算属性非常适合以下情况：

基于其他数据计算新值。
在模板中使用动态值。
创建其他计算属性的依赖项。

什么时候使用侦听器？

侦听器在以下场景中大放异彩：

在数据变化时执行操作。
实现表单验证、自动保存等功能。

示例代码

为了进一步阐明，这里有一个结合使用计算属性和侦听器的示例：

<template>
  <input v-model="firstName">
  <input v-model="lastName">
  <p>Full name: {{ fullName }}</p>
</template>

<script>
export default {
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    firstName: function() {
      console.log('First name has changed!');
    }
  }
}
</script>