vue全家桶进阶之路11：计算属性

Vue2 中的计算属性是指在组件中声明的计算属性，它们的值是根据其他数据计算得出的，并且会根据依赖数据的变化而自动更新。计算属性可以在模板中使用，与普通属性一样使用，但是它们具有以下优点：

• 缓存：计算属性的值是根据依赖数据计算得出的，只有当依赖数据发生变化时才会重新计算，而且会缓存计算结果，提高了组件的渲染性能。
• 可读性：计算属性的声明方式清晰明了，可以很容易地看出计算属性的依赖关系和计算逻辑。
• 复用：计算属性可以被多个模板引用，提高了代码的复用性。

计算属性的使用方法是在组件的 computed 选项中声明计算属性，例如：

<template>
  <div class="hello">
    {{ message }} <!-- 显示data中的message值 -->
    <p>{{ reversedMessage }}</p> <!-- 显示计算属性reversedMessage的值 -->
  </div>
</template>

<style>
.hello {
  font-size: 24px;
  color: red;
}
</style>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!' // 在data中定义message数据
    }
  },
  computed: {
    reversedMessage() { // 在computed选项中定义计算属性reversedMessage
      return this.message.split('').reverse().join('') // 计算reversedMessage的值，即message字符串的反转
    }
  }
}
</script>

在上面的代码中，我们添加了一个名为reversedMessage的计算属性。计算属性是Vue中的一种数据属性，它的值是通过对其他数据进行计算得到的。在这个例子中，reversedMessage的值是message字符串反转后的结果。

在Vue组件中，可以使用computed选项来定义计算属性。在上面的代码中，我们在组件定义的computed选项中定义了一个名为reversedMessage的计算属性。计算属性是Vue中的响应式的，当message的值发生改变时，reversedMessage的值也会自动更新。

在模板中，我们使用了双花括号语法（{{}}）来显示message和reversedMessage的值。在<p>标签中，我们显示了计算属性reversedMessage的值。

需要注意的是，计算属性的值是根据它所依赖的数据动态计算得到的，而且计算属性是基于缓存的。也就是说，只有当计算属性依赖的数据发生改变时，才会重新计算计算属性的值。这可以提高应用的性能。

在上面的代码中，我们添加了注释来解释每一部分的作用和用途。注释中体现了代码的知识重点和用途，例如：

• 显示data中的message值
• 在data中定义message数据
• 在computed选项中定义计算属性reversedMessage
• 计算reversedMessage的值，即message字符串的反转

通过添加注释，代码的可读性和可维护性得到了提高。在实际开发中，添加注释可以使代码更易于理解和修改。

 

 

以上示例的输出结果是一个红色字体大小为24px的文本“Hello Vue!”，下面是该文本反转后的字符串“!euV olleH”。这是因为在模板中使用了双花括号语法（{{}}）来显示数据和计算属性的值，而在组件中定义了一个计算属性reversedMessage，用于计算message字符串的反转。因此，页面上会显示message的原始值“Hello Vue!”和计算属性reversedMessage的值“!euV olleH”。