computed 计算属性（选项式）

最后更新：2026-10-22

computed 选项声明派生值：依赖变化时自动重算并缓存，模板里像普通属性一样使用。

📝 语法

export default {
  data() { return { price: 10, qty: 2 } },
  computed: {
    total() { return this.price * this.qty }
  }
}

value	对象：键为计算属性名，值为 getter 函数（或用 get/set 对象）

返回值：同属性名一样读取，有缓存（依赖不变不重算）

修改下面的代码，在预览区实时查看效果：

输出：

默认显示「合计：20」；改动任一输入框立即重算。

💡 提示 能用 computed 就别用 methods：computed 有缓存，methods 每次渲染都执行。

⚠️ 注意 getter 里不要写副作用（请求、赋值），那是 watch 的职责。

ℹ️ 说明 需要可写计算属性时用 get/set 对象形式（如全名拆分/合并）。

更多案例即将上线。

Q 和 methods 的区别？

A computed 基于依赖缓存；methods 每次访问都重新执行，且不能像属性一样绑定。

Q 为什么模板里不用加括号？

A 它被当作属性读取（getter 自动执行），this.total 而非 this.total()。

Q 依赖 props 可以吗？

A 可以，这是最常见的派生模式：computed 随 prop 变化自动更新。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。