计算属性的基本用法

计算属性是基于响应式依赖进行缓存的派生值。

基本语法

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}

<p>{{ fullName }}</p>

计算属性 vs 方法

// 方法：每次渲染都执行
methods: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

// 计算属性：依赖不变时返回缓存
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

计算属性仅在依赖的响应式数据变化时重新计算。

链式计算

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  },
  greeting() {
    return `你好, ${this.fullName}`
  }
}

模板中的使用

<p>{{ reversedMessage }}</p>
<button @click="changeMessage">修改</button>

要点总结

• 计算属性定义在 computed 选项中
• 基于依赖自动追踪，依赖不变则返回缓存值
• 比方法更高效，适合复杂计算
• 可在模板中直接使用，像普通数据一样