Vue3里computed和if怎么配合用？这些场景和技巧得搞懂

terry 1小时前阅读数 7 #SEO

computed基本作用是啥？和条件判断结合能解决啥问题？

Vue3里的computed叫计算属性，核心是帮我们处理响应式数据的衍生逻辑，简单说，它会自动跟踪依赖的响应式数据，只有依赖变了才重新计算，而且结果会缓存起来。

那和条件判断（像v-if、模板里的if分支这些）结合有啥用？举个生活里的例子：你点外卖时，购物车有没有选够起送金额？这个“是否能下单”的判断，就可以用computed来做——它内部结合各种条件（选了哪些商品、单价多少、起送价多少）算出一个布尔值，然后模板里用v-if根据这个值决定显示“去结算”还是“还差xx元起送”，这样做能把复杂判断逻辑从模板里抽出来，让模板更干净，代码也好维护。

咋用computed返回布尔值给v-if做判断？

最常见的场景是用computed生成一个布尔结果，给v-if当“开关”，比如做个 todo 列表，判断有没有已完成的任务，然后显示“完成列表”模块：

<template>
  <div v-if="hasCompletedTodos">
    <h3>已完成任务</h3>
    <ul>
      <li v-for="todo in completedTodos" :key="todo.id">{{ todo.title }}</li>
    </ul>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
const todos = ref([
  { id: 1, title: '写文章', done: false },
  { id: 2, title: '学Vue3', done: true },
  { id: 3, title: '运动', done: true }
])
// computed里写条件：过滤出已完成的，再判断有没有数据
const hasCompletedTodos = computed(() => {
  return todos.value.some(todo => todo.done)
})
// 顺带把已完成列表也用computed存起来（这也是常见组合）
const completedTodos = computed(() => {
  return todos.value.filter(todo => todo.done)
})
</script>

这里hasCompletedTodos这个computed，内部用some方法判断有没有已完成任务（这就是条件逻辑），返回布尔值，模板里v-if直接用这个值，既不用在模板里写复杂判断，又能利用computed的缓存——只有todos里的done状态变了，才会重新计算。

computed内部能写复杂的条件分支逻辑吗？

完全可以！而且这正是把逻辑“内聚”的好办法，比如做用户权限控制，不同角色显示不同按钮：

<template>
  <div>
    <button v-for="btn in userButtons" :key="btn">{{ btn }}</button>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
const user = ref({ role: 'editor', name: '小明' })
const userButtons = computed(() => {
  if (user.value.role === 'admin') {
    return ['删除', '编辑', '新增', '导出']
  } else if (user.value.role === 'editor') {
    return ['编辑', '查看']
  } else {
    return ['查看']
  }
})
</script>

你看，computed里用了多层if-else，根据user.role返回不同的按钮数组，模板只需要循环渲染，所有逻辑都被computed“包圆”了，这种写法比在模板里写v-if嵌套清爽太多，以后改权限逻辑，直接去computed里改就行，不用在模板里扒拉一堆条件。

computed和v-show在条件场景下咋选？

很多同学分不清v-if和v-show，结合computed用的时候更懵，简单说：

v-if 是“销毁 / 重建”DOM：如果条件为false，对应的DOM会被删掉；为true时重新创建。
v-show 是“切换display样式”：不管条件是啥，DOM一直存在，只是用CSS把它藏起来。

那和computed结合时咋选？看切换频率和渲染成本：

比如做一个“夜间模式开关”，用户可能频繁切换，这时候用computed返回isDarkMode，配合v-show更合适：

<template>
  <div class="night-theme" v-show="isDarkMode">夜间模式内容</div>
  <button @click="toggleMode">切换模式</button>
</template>
<script setup>
import { computed, ref } from 'vue'
const isDark = ref(false)
const isDarkMode = computed(() => isDark.value)
function toggleMode() {
  isDark.value = !isDark.value
}
</script>

因为切换频繁，v-show只是改CSS，比v-if反复删改DOM性能好，但如果是“用户登录后才显示的个人中心模块”，登录状态变化少，用v-if + computed更省资源（毕竟不登录时DOM都不存在）。

用computed处理条件时，和methods有啥区别？

最核心的区别是缓存机制：computed有缓存，methods没有。

举个例子，做一个“折扣后价格”计算，根据用户会员等级（青铜、白银、黄金）有不同折扣：

<template>
  <!-- 用computed的情况 -->
  <p>折扣后：{{ discountPrice }}</p>
  <!-- 用methods的情况 -->
  <p>折扣后：{{ calculateDiscountPrice() }}</p>
</template>
<script setup>
import { computed, ref } from 'vue'
const userLevel = ref('silver') // 白银会员
const originalPrice = ref(100)
// computed版：依赖userLevel和originalPrice，只有这俩变了才重新算
const discountPrice = computed(() => {
  if (userLevel.value === 'bronze') return originalPrice.value * 0.9
  if (userLevel.value === 'silver') return originalPrice.value * 0.8
  if (userLevel.value === 'gold') return originalPrice.value * 0.7
})
// methods版：每次模板渲染都会执行（哪怕依赖没变化）
function calculateDiscountPrice() {
  if (userLevel.value === 'bronze') return originalPrice.value * 0.9
  if (userLevel.value === 'silver') return originalPrice.value * 0.8
  if (userLevel.value === 'gold') return originalPrice.value * 0.7
}
</script>

如果用户等级和原价都没动，computed的discountPrice只会算一次，之后直接拿缓存值；但methods的calculateDiscountPrice每次页面有变化（比如其他无关数据更新）都会重新执行，所以复杂条件判断+依赖少变化时，优先用computed；如果是“每次调用必须重新算，不管依赖变没变”（比如随机数、当前时间），才用methods。

computed里写条件判断要注意啥？

有两个“坑”得避开：

别用非响应式数据当依赖

computed要跟踪响应式数据的变化才会重新计算，如果用了普通变量（非ref/reactive），变化时computed不会更新。

<script setup>
let normalVar = 'admin' // 普通变量，不是响应式的
const userRole = computed(() => {
  if (normalVar === 'admin') return '管理员'
  else return '普通用户'
})
function changeRole() {
  normalVar = 'user' // 这里改普通变量，computed不会触发更新！
}
</script>

要改成响应式的：const normalVar = ref('admin')，这样computed才能跟踪到变化。

别在computed里做“副作用”操作

Computed设计来做纯计算（只根据依赖返回结果，不修改外部状态），如果在computed里发请求、修改其他响应式数据，会导致逻辑混乱。

// 错误示例：在computed里修改其他数据
const count = ref(0)
const wrongComputed = computed(() => {
  count.value++ // 这里做了“修改”，属于副作用，别这么干！
  return count.value > 10
})

有副作用的逻辑，该放methods或watch里。Computed就老老实实做计算，返回结果就行。

实际项目里computed + if的典型场景有哪些？

举几个真实开发中常见的：

场景1：表单验证

注册表单里，判断“用户名是否合法、密码是否符合长度、协议是否勾选”，只有全满足才显示“提交”按钮：

<template>
  <form>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <input type="checkbox" v-model="agree" /> 同意协议
    <button v-if="canSubmit" type="submit">提交</button>
  </form>
</template>
<script setup>
import { computed, ref } from 'vue'
const username = ref('')
const password = ref('')
const agree = ref(false)
const canSubmit = computed(() => {
  const nameValid = username.value.length >= 3
  const pwdValid = password.value.length >= 6
  return nameValid && pwdValid && agree.value
})
</script>

场景2：页面权限控制

后台系统里，不同角色看到的侧边栏菜单不同，用computed根据用户角色返回菜单列表，v-if控制是否渲染某个菜单：

<template>
  <aside>
    <ul>
      <li v-if="showDashboard" @click="goDashboard">仪表盘</li>
      <li v-if="showOrder" @click="goOrder">订单管理</li>
      <li v-if="showUser" @click="goUser">用户管理</li>
    </ul>
  </aside>
</template>
<script setup>
import { computed, ref } from 'vue'
const user = ref({ role: 'manager' }) // 假设是经理角色
const showDashboard = computed(() => user.value.role !== 'guest')
const showOrder = computed(() => user.value.role === 'manager' || user.value.role === 'admin')
const showUser = computed(() => user.value.role === 'admin')
</script>

场景3：购物车空状态判断

购物车页面，判断有没有商品，有就显示列表，没有就显示“购物车为空”：

<template>
  <div v-if="hasGoods">
    <ul>
      <li v-for="item in cartList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
  <div v-else>购物车空空如也～</div>
</template>
<script setup>
import { computed, ref } from 'vue'
const cartList = ref([]) // 假设初始购物车为空
const hasGoods = computed(() => cartList.value.length > 0)
</script>