计算属性（computed）

1. 什么是计算属性

计算属性（Computed Properties）是 Vue 提供的一种特性，允许开发者定义依赖其他数据的动态属性。计算属性的值是通过计算得出的，并且可以在模板中使用。示例代码如下：

new Vue({
  el: '#app', // 绑定 Vue 实例的根元素
  data: {
    firstName: 'John', // 定义 firstName 数据
    lastName: 'Doe' // 定义 lastName 数据
  },
  computed: {
    // 定义一个计算属性 fullName，依赖于 firstName 和 lastName
    fullName() {
      return this.firstName + ' ' + this.lastName; // 返回拼接后的全名
    }
  }
});

在上面的代码中，fullName 是一个计算属性，它依赖于 firstName 和 lastName，并通过它们计算出全名。

2. 计算属性的特点

• 属性本质：虽然计算属性在声明时是定义为方法的，但它的本质是一个属性。
• 缓存机制：计算属性会缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。这使得计算属性的性能优于每次都重新计算的方法。
• 自动更新：计算属性会自动监听其依赖的数据，当依赖的数据变化时，计算属性会自动更新，确保数据一致性。

3. 如何声明计算属性

计算属性是在 Vue 实例的 computed 选项中定义的。每个计算属性都是一个方法，返回一个值，该值可以依赖于其他数据属性。

new Vue({
  el: '#app', // 绑定 Vue 实例的根元素
  data: {
    a: 1, // 定义 a 数据
    b: 2 // 定义 b 数据
  },
  computed: {
    // 定义一个计算属性 sum，依赖于 a 和 b
    sum() {
      return this.a + this.b; // 返回 a 和 b 的和
    }
  }
});

在上面的代码中，sum 是一个计算属性，它依赖于 a 和 b，并计算出它们的和。

4. 计算属性的使用注意点

• 必须定义在 computed 节点中：计算属性只能在 Vue 实例的 computed 选项中定义。
• 必须是一个函数：每个计算属性都是一个方法，返回一个值。
• 必须有返回值：计算属性的方法必须返回一个值，这个值将被 Vue 用作属性的值。
• 当做普通属性使用：计算属性在模板中使用时，就像普通的属性一样，不需要加括号调用。

<div id="app">
    <!-- 直接使用计算属性 fullName，就像普通属性一样 -->
    <p>{{ fullName }}</p>
</div>

<script>
    new Vue({
        el: '#app', // 绑定 Vue 实例的根元素
        data: {
            firstName: 'John', // 定义 firstName 数据
            lastName: 'Doe' // 定义 lastName 数据
        },
        computed: {
            // 定义一个计算属性 fullName，依赖于 firstName 和 lastName
            fullName() {
                return this.firstName + ' ' + this.lastName; // 返回拼接后的全名
            }
        }
    })
</script>

在上面的代码中，fullName 计算属性在模板中使用时不需要加括号调用。

5. 计算属性 vs 方法

• 计算属性的缓存：计算属性会缓存结果，只有当依赖的数据发生变化时才会重新计算。而方法每次调用都会重新计算，不会缓存结果。
• 性能优势：由于计算属性的缓存机制，当依赖数据没有变化时，计算属性的性能更好，因为它不需要每次都重新计算。

new Vue({
  el: '#app', // 绑定 Vue 实例的根元素
  data: {
    message: 'Hello' // 定义 message 数据
  },
  computed: {
    // 定义一个计算属性 reversedMessage，返回 message 的反转字符串
    reversedMessage() {
      return this.message.split('').reverse().join(''); // 返回反转后的字符串
    }
  },
  methods: {
    // 定义一个方法 reverseMessage，返回 message 的反转字符串
    reverseMessage() {
      return this.message.split('').reverse().join(''); // 返回反转后的字符串
    }
  }
});

在上面的代码中，reversedMessage 是一个计算属性，而 reverseMessage 是一个方法。两者都实现了相同的功能，但计算属性 reversedMessage 会缓存结果，而方法 reverseMessage 每次调用都会重新计算。

总结

计算属性是 Vue 提供的一种特性，允许开发者定义依赖其他数据的动态属性。计算属性的值通过计算得出，并且可以在模板中使用。计算属性具有缓存机制，只有当依赖的数据发生变化时才会重新计算，因此在性能上优于每次都重新计算的方法。计算属性适用于需要依赖多个数据并返回单一结果的情况。