Vue3 script setup里的computed咋用？常见问题一次说清

terry 2小时前阅读数 6 #SEO

不少刚上手Vue3 script setup的同学，对computed的用法、和其他API的配合总犯迷糊，为啥用了computed页面没更新？”“它和methods有啥区别？”今天把这些高频问题拆开来唠，从基础到复杂场景全覆盖~

script setup里的computed是干啥的？

简单说，computed是用来封装“依赖响应式数据的派生逻辑” ，比如购物车商品的总价，依赖每个商品的“单价×数量”；用户全名依赖“姓+名”——这些逻辑如果直接写在模板里，会让模板又乱又难维护；如果写在methods里，每次渲染都要重复计算，浪费性能。

computed有两个核心优势：

自动响应式：依赖的响应式数据（比如ref/reactive里的变量）变了，computed的结果会自动更新；
缓存机制：只要依赖没变化，多次访问computed结果不会重复计算，性能更优。

在Vue3的script setup语法中，computed是组合式API的一部分，需要从vue里导入后使用，写法比选项式API更灵活~

咋在script setup里写computed？

分“只读（默认）”和“可写（带setter）”两种场景，咱一个个说。

场景1：只读的computed（最常用）

步骤很简单：导入computed → 用computed()包裹一个返回值的函数 → 函数里写依赖和计算逻辑。

举个“全名拼接”的例子：

<script setup>
import { ref, computed } from 'vue'
// 定义响应式的姓和名
const firstName = ref('张')
const lastName = ref('三')
// 定义计算属性：拼接全名
const fullName = computed(() => {
  return firstName.value + lastName.value
})
</script>
<template>
  <!-- 模板里直接用，不用写.value -->
  <div>全名：{{ fullName }}</div>
</template>

这里要注意：computed()返回的本身是个ref ，所以在JS里访问它的值时要写fullName.value，但模板里Vue会自动解包，直接写fullName就行~

场景2：可写的computed（带setter）

有些场景需要“双向绑定”计算属性，比如用户修改全名时，自动拆分给firstName和lastName，这时候要给computed传一个包含get和set的对象 ：

const fullName = computed({
  // 读取时的逻辑（getter）
  get() {
    return firstName.value + lastName.value
  },
  // 修改时的逻辑（setter）
  set(newValue) {
    // 假设用户输入格式是“姓-名”，张-三”
    const [first, last] = newValue.split('-')
    firstName.value = first
    lastName.value = last
  }
})

这时在模板里用v-model="fullName"，用户输入新值时，setter会自动触发，更新firstName和lastName~

computed和ref/reactive咋配合？

computed的核心是“依赖响应式数据”，得搞清楚和ref/reactive的互动逻辑：

依赖ref时：

如果依赖的是ref定义的变量（比如const count = ref(0)），在computed的getter里要写count.value才能拿到值。

依赖reactive时：

如果依赖的是reactive定义的对象/数组（比如const user = reactive({ age: 18 })），直接写user.age就行，因为reactive不需要.value解包。

举个“根据出生年份算年龄”的例子（假设当前年份是2023）：

import { reactive, computed } from 'vue'
const user = reactive({
  birthYear: 2005 // 响应式对象里的属性
})
// 计算属性：根据出生年份算年龄
const age = computed(() => {
  return 2023 - user.birthYear
})

当user.birthYear变化时，age会自动更新~

computed的缓存机制在script setup里咋体现？

缓存的关键是：只有依赖的响应式数据变了，computed才会重新计算；否则多次访问结果直接复用 。

举个“求和”的例子，对比computed和methods的区别：

<script setup>
import { ref, computed } from 'vue'
const num1 = ref(1)
const num2 = ref(2)
// computed版本：求和
const sum = computed(() => {
  console.log('sum计算了')
  return num1.value + num2.value
})
// methods版本：求和
function getSum() {
  console.log('getSum执行了')
  return num1.value + num2.value
}
</script>
<template>
  <button @click="num1++">num1+1</button>
  <div>computed求和：{{ sum }}</div>
  <div>methods求和：{{ getSum() }}</div>
</template>

第一次渲染时：sum会打印“sum计算了”，getSum()也会打印“getSum执行了”；
没点按钮时，再刷新页面（或多次访问sum）：sum不会重复打印（复用缓存），但getSum()每次都会打印；
点按钮修改num1后：sum和getSum()都会重新计算并打印。

这就是缓存的意义——减少不必要的计算，提升性能 ，如果逻辑要被频繁调用，且依赖少变，优先用computed~

复杂场景下computed咋处理？

场景1：多依赖（同时依赖多个响应式数据）

比如购物车有多个商品，每个商品有price和quantity，要计算总价：

import { reactive, computed } from 'vue'
// 购物车商品列表（reactive数组）
const cartItems = reactive([
  { id: 1, price: 10, quantity: 2 },
  { id: 2, price: 20, quantity: 3 }
])
// 计算总价：遍历每个商品，累加“单价×数量”
const totalPrice = computed(() => {
  return cartItems.reduce((acc, item) => {
    return acc + item.price * item.quantity
  }, 0)
})

这时，只要cartItems里的任何商品的price/quantity变化，或者数组长度变化（新增/删除商品） ，totalPrice都会自动更新~

场景2：异步逻辑能放到computed里吗？

不行！ computed的getter必须是同步函数 ，因为它要立刻返回计算结果，如果有异步需求（比如从接口拿数据后计算），得结合watch或生命周期钩子：

import { ref, computed, watchEffect } from 'vue'
const apiData = ref(null) // 存接口返回的数据
const processedData = computed(() => {
  if (!apiData.value) return '加载中...'
  // 对接口数据做过滤、格式化
  return apiData.value.filter(item => item.status === 'active')
})
// 用watchEffect发请求（异步逻辑放这里）
watchEffect(async () => {
  apiData.value = await fetch('/api/data') // 假设fetchData是请求函数
})

这样，接口数据回来后，processedData会自动更新~

computed和methods选哪个？

核心看场景和需求 ：

对比维度	computed	methods
缓存机制	有（依赖不变时复用结果）	无（每次调用都重新执行）
传参支持	不支持（除非用闭包，但破坏缓存）	支持（函数可传任意参数）
适用场景	依赖响应式数据的“派生值”（如总价）	事件处理、需传参的逻辑（如格式化）