Vue 2.0 中理解 Computed

当我们谈及 Vue.js 里的计算属性（Computed Properties）时，我们实际指的是什么呢？

而我们使用计算属性又有什么好处？

在本文中，我们将深入剖析 Vue.js 的计算属性，从它底层的工作原理到实际的使用案例，为你全面揭秘这个强大的工具。

计算属性的基础概念

计算属性是 Vue.js 中一种非常有用的特性，它允许你定义一些基于 Vue 实例中其他数据的响应式属性。

举个例子，假设你有一个 Vue 实例，它包含一个叫做 name 的数据属性，其中存储了用户的名字。现在，你想创建一个计算属性叫做 greeting，它会根据 name 的值动态生成一个问候语。

你可以在你的 Vue 实例中使用 computed 选项来定义计算属性。 computed 选项是一个对象，它包含了计算属性的名称和一个函数，该函数返回计算属性的值。

为什么要使用计算属性

Vue.js 中的计算属性可以让你以一种声明式的方式来定义你的数据。这有助于提高你的代码的可读性和可维护性。

此外，使用计算属性还可以提高你的应用程序的性能。因为计算属性只会在其依赖的数据发生变化时才重新计算。这有助于减少不必要的渲染。

什么时候使用计算属性

计算属性在以下情况下非常有用：

• 当你想从其他数据属性中派生出新的数据。
• 当你想对数据进行格式化或转换。
• 当你想根据某些条件来显示或隐藏元素。
• 当你想创建一个只读的属性。

如何使用计算属性

为了使用计算属性，你需要在你的 Vue 实例中使用 computed 选项。computed 选项是一个对象，它包含了计算属性的名称和一个函数，该函数返回计算属性的值。

例如，以下代码定义了一个名为 greeting 的计算属性：

export default {
  computed: {
    greeting() {
      return `Hello, ${this.name}!`;
    },
  },
};

computed 的工作原理

当你访问一个计算属性时，Vue.js 会检查该计算属性的依赖关系。如果计算属性的依赖关系没有发生变化，那么 Vue.js 就会从缓存中返回计算属性的值。否则，Vue.js 会重新计算计算属性的值，并将其存储在缓存中。

结论

计算属性是 Vue.js 中一个非常强大的工具，它可以让你以一种声明式的方式来定义你的数据，提高你的代码的可读性和可维护性。此外，使用计算属性还可以提高你的应用程序的性能。

如果你想了解更多关于 Vue.js 的计算属性的知识，你可以参考 Vue.js 官方文档。