【原理详解】从头认识 VUE 计算属性的工作原理

Vue、计算属性、响应式编程、依赖追踪

计算属性的定义和原理

计算属性是 Vue 实例中响应式属性，通过一个函数计算得出，该函数被标识为 computed。当计算属性的依赖项发生变化时，Vue 会自动重新计算和更新计算属性的值。

计算属性的语法如下：

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

上面这个计算属性 fullName 依赖于 firstName 和 lastName 属性。当这些属性中的任何一个发生变化时，fullName 都会重新计算。

依赖追踪

计算属性的强大之处在于其依赖追踪机制。Vue 会自动收集计算属性所依赖的响应式属性，并在这些属性发生变化时重新评估计算属性。

这个过程是通过一个称为“依赖收集器”的内部机制实现的。当一个计算属性被访问时，依赖收集器会将计算属性的依赖项添加到一个队列中。当任何依赖项发生变化时，队列中所有的计算属性都会被重新评估。

延迟求值

计算属性默认采用延迟求值策略，这意味着它们只有在被访问时才会被计算。这可以提高性能，因为只有在需要时才进行计算。

然而，你也可以通过使用 cache 选项来强制计算属性在组件创建时立即执行。这在某些情况下可能很有用，例如预先计算可能在组件生命周期中多次使用的昂贵计算。

示例演示

以下是一个演示计算属性工作原理的简单示例：

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

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("");
    const lastName = ref("");

    const fullName = computed(() => {
      return firstName.value + " " + lastName.value;
    });

    return { firstName, lastName, fullName };
  }
};
</script>

在这个示例中，fullName 计算属性依赖于 firstName 和 lastName。当用户输入任何一个输入框时，fullName 会自动更新。

最佳实践

使用计算属性时，请遵循以下最佳实践：

• 保持计算简单高效，避免复杂的计算。
• 如果计算属性的值在组件生命周期中保持不变，请使用 cache 选项进行预先计算。
• 充分利用 Vue 的 reactivity 系统，尽量避免手动跟踪依赖项。
• 为计算属性选择有意义的名称，以增强可读性和可维护性。

结论

Vue 计算属性是构建响应式和高效的用户界面的强大工具。通过充分理解其工作原理，你可以有效地利用计算属性来管理组件状态并优化应用程序性能。