🧮《计算属性》— 自动根据其它响应式数据得出结果

学习代码案例

🧮Vue 中的计算属性 computed：即聪明又节省性能的"智能变量"

在开发 Vue 应用时，我们经常会遇到这样的需求：

根据多个状态变量组合出一个新的值；
页面显示的内容是"派生"自已有的数据；
想避免重复逻辑和无意义的重复计算。

这时，Vue 提供的 computed（计算属性）就能帮上大忙了！

🧠 什么是计算属性？

计算属性（computed）是 基于其它响应式状态自动计算出来的值 。它本质上是一个带有缓存的 getter 函数，只有依赖的数据发生变化时才会重新执行计算逻辑。

可以把它想象成一个 聪明的公式变量，自动根据输入算出结果，但不会没事就重算，性能也很棒！

✅ 基本用法与示例

我们来实现一个显示用户"全名"的例子：

js 复制代码

import { ref, computed } from 'vue'

// 定义两个响应式变量，分别代表姓和名
const firstName = ref('Tom')
const lastName = ref('Hanks')

// 创建一个计算属性 fullName，动态拼接姓和名
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

🔍 解释一下每一步：

firstName 和 lastName 是通过 ref() 创建的响应式变量；
computed() 接收一个函数，这个函数的返回值将被 Vue 当作"计算属性"的值；
在函数中访问的所有响应式变量（这里是 firstName.value 和 lastName.value）会被 Vue 自动追踪；
当它们发生变化时，fullName 也会自动更新。

🖼️ 在模板中使用 computed（无需 .value）

js 复制代码

<template>
  <p>Full name: {{ fullName }}</p>
</template>

在模板里你不需要写 fullName.value，Vue 会帮你自动解包。写起来就像普通变量一样简洁。

这就是 Vue 的模板自动解包机制，为开发者省去了不少麻烦。

⚡computed 的缓存机制（性能优势）

Vue 会缓存计算结果，只有依赖的值发生变化时才重新计算。

举个例子：

js 复制代码

const double = computed(() => {
  console.log('执行了计算逻辑')
  return count.value * 2
})

每次访问 double.value，如果 count.value 没变，console.log 不会执行。也就是说：多次使用，不会重复运算。

这在以下场景中特别有用：

复杂的逻辑运算；
大量 DOM 更新时的性能优化；
防止重复执行耗时操作。

✅ computed vs 普通函数

你可能会想：我直接用一个方法 function 不也能返回拼接值吗？

js 复制代码

function getFullName() {
  return `${firstName.value} ${lastName.value}`
}

虽然结果一样，但这个函数 每次调用都会重新执行，没有缓存优化。而 computed 会在依赖不变时返回之前的结果，性能更优。

✅ computed vs watch？

特性	computed	watch
类型	变量（getter）	监听器（副作用）
是否缓存	✅ 是	❌ 否，每次变化都执行
使用场景	派生状态、显示数据	触发请求、写入 localStorage 等副作用
写法	computed(() => {...})	watch(source, callback)

📦 常见使用场景

拼接字符串或数值

如全名、带单位的价格、拼接地址等；
过滤/排序列表

根据关键词筛选 todo 列表，根据价格排序商品等；
格式化数据展示

比如金额千分位、时间戳格式化等；
结合 UI 状态

判断按钮是否可用、是否高亮等逻辑处理；

🚫 computed 的使用误区

❌ 把异步请求写在 computed 里

计算属性是同步的，不能放异步逻辑，否则结果永远是 undefined。

js 复制代码

// 🚫 错误写法
const userInfo = computed(async () => {
  const res = await fetch(...)
  return res.data
})

✅ 正确方式应该是用 watch() 或 onMounted() 发请求。

❤️ 总结一句话

计算属性是 Vue 给你的一个性能高、逻辑清晰、使用方便的"智能变量"。只要你能通过已有状态推导出一个新值，就应该优先用 computed！

🙌 如果你觉得这篇内容对你有帮助...

非常感谢你读到这里！如果你觉得这篇文章清晰易懂，帮助你更好地理解了 Vue 的 computed 计算属性：

👉 点赞是对我最大的鼓励！

👉 收藏方便你以后回顾~

👉 评论交流 我会一一回复你的问题！

👉 转发分享 给更多在学习 Vue 的朋友～