Vue 3 的 computed 计算属性

computed 做什么#

computed 从 getter 函数派生出一个新值，返回值是 Ref。getter 里读取的响应式数据就是它的依赖，依赖变化时重新计算，依赖不变时直接返回缓存结果，不会重复执行。

只有被读取时才会计算，这叫惰性求值。getter 必须是纯函数：只读取响应式数据，不产生副作用。

只读的 getter 写法#

只传一个 getter 函数时，返回值是只读 Ref，类型是 Readonly<Ref<Readonly<T>>>，对 .value 赋值会报错。

1
import { computed, ref } from 'vue'
2

3
const price = ref(0)
4
const label = computed<string>(() => '$' + price.value)
5

6
label.value        // '$0'
7
label.value = '$1' // 只读，赋值会报错

模板里会自动解包，直接写 label 就行；在 JS 里要通过 .value 读取。

可写的 get/set 写法#

需要反向写入时，传一个带 get 和 set 的对象。get 仍然从依赖派生值，set 负责把写入的新值映射回依赖，这样得到的 computed 可读也可写。

1
import { computed, ref } from 'vue'
2

3
const price = ref(0)
4

5
const priceText = computed({
6
  get: () => String(price.value),
7
  set: (value: string) => {
8
    // 输入框给的是字符串，存进 price 前先转成数字
9
    price.value = Number(value) || 0
10
  },
11
})

priceText 可以直接绑到 v-model 上：读取时拿到字符串，写入时转成数字存进 price。set 只负责把写入映射回依赖，可写 computed 只用在双向绑定这类场合。

购物车案例#

下面用两个 computed 处理同一份商品列表，一个按关键字过滤，一个汇总总价。

1
<template>
2
  <div>
3
    <input v-model="keyWord" placeholder="请输入名称" type="text">
4
    <table style="margin-top: 10px;" width="500" cellspacing="0" cellpadding="0" border>
5
      <thead>
6
        <tr>
7
          <th>物品</th>
8
          <th>单价</th>
9
          <th>数量</th>
10
          <th>总价</th>
11
          <th>操作</th>
12
        </tr>
13
      </thead>
14
      <tbody>
15
        <tr v-for="(item, index) in searchData">
16
          <td align="center">{{ item.name }}</td>
17
          <td align="center">{{ item.price }}</td>
18
          <td align="center">
19
            <button @click="item.num > 1 ? item.num-- : null">-</button>
20
            <input v-model="item.num" type="number">
21
            <button @click="item.num < 99 ? item.num++ : null">+</button>
22
          </td>
23
          <td align="center">{{ item.price * item.num }}</td>
24
          <td align="center">
25
            <button @click="del(index)">删除</button>
26
          </td>
27
        </tr>
28
      </tbody>
29
      <tfoot>
30
        <tr>
31
          <td colspan="5" align="right">
32
            <span>总价：{{ total }}</span>
33
          </td>
34
        </tr>
35
      </tfoot>
36
    </table>
37
  </div>
38
</template>
39

40
<script setup lang="ts">
41
import { computed, reactive, ref } from 'vue'
42

43
interface Data {
44
  name: string
45
  price: number
46
  num: number
47
}
48

49
const keyWord = ref('')
50
const data = reactive<Data[]>([
51
  { name: '小满的绿围巾', price: 100, num: 1 },
52
  { name: '小满的红衣服', price: 200, num: 1 },
53
  { name: '小满的黑袜子', price: 300, num: 1 },
54
])
55

56
const searchData = computed(() => {
57
  return data.filter((item) => item.name.includes(keyWord.value))
58
})
59

60
const total = computed(() => {
61
  return data.reduce((prev: number, next: Data) => {
62
    return prev + next.num * next.price
63
  }, 0)
64
})
65

66
const del = (index: number) => {
67
  data.splice(index, 1)
68
}
69
</script>

searchData 依赖 data 和 keyWord，返回过滤后的列表
total 只依赖 data，把每行的单价乘数量累加

修改某行的数量时 total 重算；删除某一行时两个 computed 都失效；都等到下次读取时才计算，表格跟着更新。

什么时候用 computed#

computed 有缓存，依赖不变时不会重算；在模板里直接调用函数则每次渲染都会重新执行。由响应式数据算出来的派生、过滤、聚合结果适合放 computed。

异步请求、DOM 操作、修改其他状态都是副作用，放在事件处理函数或 watch 里，不要写进 getter。

当海风翻页时

computed 做什么#

只读的 getter 写法#

可写的 get/set 写法#

购物车案例#

什么时候用 computed#

Vue 3 学习笔记

继续阅读

换条路线

当海风翻页时

computed 做什么#

只读的 getter 写法#

可写的 get/set 写法#

购物车案例#

什么时候用 computed#

分享文章

沿着主题读

换条路线