Vue2计算属性

Vue2中的计算属性是一种方便的方式，用于在模板中进行复杂的计算，并以响应式的方式更新视图。计算属性的特点是：

1. 计算属性基于它们的依赖进行缓存，只有在依赖发生变化时才会重新计算。

2. 计算属性的结果将被缓存，直到响应式依赖发生变化才会重新计算，这意味着多次访问计算属性的 getter 函数会立即返回之前的计算结果，而不必再次执行函数。

3. 计算属性可以依赖于其他计算属性，这使得它们可以在更高级别上进行复杂的计算。

下面是一个计算属性的简单示例：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

在上面的代码中，我们定义了一个计算属性 `reversedMessage`，它依赖于 `message`。当 `message` 发生变化时，`reversedMessage` 会重新计算并更新视图。