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

前言

当我们需要通过复杂的逻辑处理来得到我们想要的数据时，如果通过在模板中运用表达式计算的话，虽然很方便。但如果写太多的话，往往会使的整个模板变得臃肿，难以维护。而对于这种情况，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: [    '小马',    '小明',    '小李'  ]})
// 一个计算属性 refconst 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 则总是会在 页面重新渲染时，重新执行。