vue2 中的 computed

在Vue2中，计算属性是一种计算新属性值的便捷方式。计算属性将基于现有数据计算出一个新的属性值，并将其设置为Vue实例的响应式属性之一。计算属性是基于它们的依赖项进行缓存的，只有当依赖项发生更改时才会重新计算。这使得计算属性能更高效地处理复杂的计算。

以下是一个计算属性的范例：

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}
</script>

在此范例中，fullName计算属性基于firstName和lastName数据计算而来。因此，每次firstName或lastName数据更改时，fullName都会被重新计算。fullName具有getter函数，但不具有setter函数。这意味着fullName是只读的，不能通过Vue实例直接更改。