计算属性与侦听器的选择

计算属性和侦听器都能响应数据变化，但适用场景不同。

计算属性适用场景

computed: {
  // 派生值
  fullName() {
    return `${this.firstName} ${this.lastName}`
  },
  // 过滤数据
  filteredItems() {
    return this.items.filter(item => item.active)
  }
}

• 基于现有数据计算新值
• 需要缓存结果
• 同步操作

侦听器适用场景

watch: {
  // 异步操作
  async searchQuery(val) {
    this.results = await api.search(val)
  },
  // 开销大的操作
  complexData(val) {
    expensiveOperation(val)
  }
}

• 执行异步操作
• 执行开销大的操作
• 数据变化时执行副作用

对比

优先使用计算属性，需要异步或副作用时才用侦听器。

要点总结

• 计算属性用于派生值，有缓存
• 侦听器用于异步操作和副作用
• 优先选择计算属性
• 两者不可互相替代时结合使用