Vue3入门指北（四）computed （计算属性）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第二十二天，点击查看活动详情

前言

当我们需要通过复杂的逻辑处理来得到我们想要的数据时，如果通过在模板中运用表达式计算的话，虽然很方便。但如果写太多的话，往往会使的整个模板变得臃肿，难以维护。而对于这种情况，vue3提供了 computed api帮助我们解决这种问题。下面就让我们来看一看。

computed

比如我们有如下一些信息：

const class = reactive({
  name: '五年二班',
  students: [
    '小马',
    '小明',
    '小李'
  ]
})

我们需要根据班级的人数判断为大班小班：

<p>类别:</p>
<span>{{ class.students.length > 10 ? '大' : '小' }}班</span>

我们可以看出如上代码的结果依赖于students属性，并且如果有多出地方用到的时候，这样的代码就会写好几遍。

对于这样的情况，vue推荐使用computed api来解决：

<script setup>
import { reactive, computed } from 'vue'

const class = reactive({
  name: '五年二班',
  class: [
    '小马',
    '小明',
    '小李'
  ]
})

// 一个计算属性 ref
const classType = computed(() => {
  return class.students.length > 10 ? '大' : '小'
})
</script>

<template>
  <p>类别:</p>
  <span>{{ classType }}</span>
</template>

这里通过computed返回了一个 计算属性ref。可以通过.value的形式计算访问，在模板中可以直接使用，会自动解包，无需.value

注意：Vue的computed会自动追踪响应式的依赖，也就意味着当class.students改变时，相应的classType也会同步更新。

computed vs methods

有些细心的同学可能会发现，如果定义一个 method 也可以实现同样的效果。

但两者的区别在于，computed 是缓存的结果，他只有在其关联的依赖更新时，才会重新计算。而这也解释了Date.now() 不会更新的问题：

const now = computed(() => Date.now())

而定义的 method 则总是会在 页面重新渲染时，重新执行。