Vue3计算属性如何兼顾模板简化、性能优化与响应式自动更新？

kknone
90 阅读17分钟

1 计算属性的基本概念

在Vue3的响应式系统中，我们经常需要基于响应式数据生成新的数据（比如过滤数组、拼接字符串）。如果直接在模板中写复杂逻辑（比如{{ todos.filter(todo => todo.completed).length }}），会让模板变得臃肿、难以维护——这就是计算属性要解决的核心问题。

1.1 什么是计算属性？

计算属性（Computed Property）是基于响应式依赖自动计算并缓存结果的属性。它的本质是一个带缓存的响应式函数：

  • 当依赖的响应式数据变化时，计算属性会自动重新计算；
  • 当依赖没有变化时，计算属性会直接返回缓存的结果，不会重复执行逻辑。

用官网的话来说：“计算属性是基于它们的响应式依赖进行缓存的。只有当依赖发生改变时，它们才会重新求值。”

1.2 计算属性与方法的区别

很多初学者会混淆计算属性和方法（Method），两者的核心区别在于缓存机制：

特性计算属性方法
缓存依赖不变时返回缓存结果每次调用都重新执行逻辑
触发时机依赖变化时自动更新手动调用时执行
适用场景频繁使用的复杂逻辑单次或手动触发的逻辑

举个例子：如果需要多次显示“已完成任务数”，用计算属性只需计算一次（依赖变化时更新），而用方法会每次调用都重新过滤数组——计算属性的性能更优。

2 计算属性的核心作用

计算属性的价值可以总结为三点：简化模板、缓存性能、自动更新。

2.1 简化模板逻辑

模板的职责是展示数据，而非处理逻辑。把复杂逻辑抽到计算属性中，能让模板更简洁、易读。

示例：原模板中的复杂逻辑

<!-- 模板里直接写过滤和计数逻辑，臃肿！ -->
<p>已完成任务数：{{ todos.filter(todo => todo.completed).length }}</p>

优化后：用计算属性简化模板

<template>
  <p>已完成任务数：{{ completedCount }}</p>
</template>

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

const todos = ref([/* 任务列表 */])
// 计算属性：已完成任务数
const completedCount = computed(() => {
  return todos.value.filter(todo => todo.completed).length
})
</script>

2.2 缓存结果提升性能

计算属性会缓存结果，只有当依赖的响应式数据变化时才重新计算。这对性能敏感的场景（比如大数据量过滤、复杂运算）非常友好。

示例：频繁使用计算属性

<template>
  <!-- 多次使用计算属性，只会计算一次 -->
  <p>已完成：{{ completedCount }}</p>
  <p>已完成占比：{{ completedRatio }}%</p>
</template>

<script setup>
const completedCount = computed(() => {
  console.log('计算已完成任务数...') // 仅依赖变化时打印
  return todos.value.filter(todo => todo.completed).length
})
// 依赖completedCount的计算属性
const completedRatio = computed(() => {
  return (completedCount.value / todos.value.length) * 100
})
</script>

当todos不变时，无论多少次使用completedCount，都只会打印一次“计算已完成任务数...”——缓存生效了！

2.3 自动追踪依赖更新

计算属性会自动追踪它用到的所有响应式依赖（比如ref或reactive包裹的数据）。当任何一个依赖变化时，计算属性会自动重新计算，并触发视图更新。

这个过程是Vue响应式系统的核心能力，无需手动监听或触发——“写更少的代码，做更多的事”。

3 计算属性的工作原理

要真正理解计算属性，需要先了解Vue的响应式依赖追踪机制。我们用流程图拆解它的工作流程：

graph TD
A[初始化计算属性] --> B[收集依赖：读取响应式数据]
B --> C[计算结果并缓存]
C --> D[返回结果给视图]
E[依赖数据变化] --> F[触发重新计算]
F --> C[更新缓存结果]
C --> D[更新视图]

详细步骤：

  1. 依赖收集：当计算属性首次执行时，Vue会记录它用到的所有响应式数据（比如todos）。
  2. 缓存结果：计算属性将结果缓存起来，供后续使用。
  3. 依赖变化：当依赖的响应式数据（比如todos中的某条任务被标记为完成）变化时，Vue会触发计算属性重新计算。
  4. 更新视图：计算属性的新结果会替换缓存，并自动更新依赖它的视图。
往期文章归档
免费好用的热门在线工具

4 计算属性的应用场景

计算属性不是“银弹”，但在以下场景中能发挥最大价值：

4.1 复杂数据转换

当需要将响应式数据转换为另一种格式（比如过滤数组、格式化日期）时，计算属性是最佳选择。

示例：过滤任务列表

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

// 响应式数据：任务列表和过滤状态
const todos = ref([
  { id: 1, text: '学习Vue3', completed: true },
  { id: 2, text: '写博客', completed: false },
  { id: 3, text: '锻炼身体', completed: false }
])
const filterStatus = ref('all') // 过滤状态：all/active/completed

// 计算属性：根据过滤状态返回任务列表
const filteredTodos = computed(() => {
  switch (filterStatus.value) {
    case 'active':
      return todos.value.filter(todo => !todo.completed)
    case 'completed':
      return todos.value.filter(todo => todo.completed)
    default:
      return todos.value
  }
})
</script>

4.2 组合多个响应式数据

当需要将多个响应式数据组合成新数据时，计算属性能自动追踪所有依赖。

示例：组合用户名和邮箱

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

const firstName = ref('张')
const lastName = ref('三')
const email = ref('zhangsan@example.com')

// 计算属性：组合成显示名称（如“张三 <zhangsan@example.com>”）
const displayName = computed(() => {
  return `${firstName.value}${lastName.value} <${email.value}>`
})
</script>

4.3 避免重复计算

对于频繁使用的复杂逻辑（比如大量数据的排序、统计），计算属性的缓存机制能避免重复计算，提升性能。

示例：统计商品总价

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

const cart = ref([
  { id: 1, name: '手机', price: 5000, quantity: 1 },
  { id: 2, name: '耳机', price: 1000, quantity: 2 }
])

// 计算属性：购物车总价（仅当cart变化时重新计算）
const totalPrice = computed(() => {
  return cart.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})
</script>

5 实战示例：Todo List 过滤功能

我们用计算属性实现一个完整的Todo List，包含添加任务和过滤状态功能。

5.1 完整代码（Vue3 + <script setup>）

<template>
  <div class="todo-app">
    <!-- 添加任务输入框 -->
    <input
      v-model="newTodoText"
      placeholder="请输入任务"
      @keyup.enter="addTodo"
      class="todo-input"
    />
    <!-- 过滤状态下拉框 -->
    <select v-model="filterStatus" class="filter-select">
      <option value="all">全部任务</option>
      <option value="active">未完成任务</option>
      <option value="completed">已完成任务</option>
    </select>
    <!-- 显示过滤后的任务列表 -->
    <ul class="todo-list">
      <li v-for="todo in filteredTodos" :key="todo.id" class="todo-item">
        <input
          type="checkbox"
          v-model="todo.completed"
          class="todo-checkbox"
        />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
      </li>
    </ul>
  </div>
</template>

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

// 1. 响应式数据：任务列表（初始有3条测试数据）
const todos = ref([
  { id: 1, text: '学习Vue3计算属性', completed: true },
  { id: 2, text: '写一篇技术博客', completed: false },
  { id: 3, text: '每天锻炼30分钟', completed: false }
])

// 2. 响应式数据：新任务输入内容
const newTodoText = ref('')

// 3. 响应式数据：过滤状态（默认显示全部）
const filterStatus = ref('all')

// 4. 计算属性：过滤后的任务列表（依赖todos和filterStatus）
const filteredTodos = computed(() => {
  // 根据过滤状态返回不同的任务列表
  if (filterStatus.value === 'active') {
    return todos.value.filter(todo => !todo.completed)
  } else if (filterStatus.value === 'completed') {
    return todos.value.filter(todo => todo.completed)
  } else {
    return todos.value // 默认返回全部任务
  }
})

// 5. 方法：添加新任务
const addTodo = () => {
  const text = newTodoText.value.trim()
  if (text) {
    todos.value.push({
      id: Date.now(), // 用时间戳生成唯一ID
      text: text,
      completed: false // 新任务默认未完成
    })
    newTodoText.value = '' // 清空输入框
  }
}
</script>

<style scoped>
.todo-app { max-width: 400px; margin: 20px auto; padding: 0 20px; }
.todo-input { width: 100%; padding: 10px; margin-bottom: 10px; }
.filter-select { padding: 5px; margin-bottom: 10px; }
.todo-list { list-style: none; padding: 0; }
.todo-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
.todo-checkbox { margin-right: 10px; }
.completed { text-decoration: line-through; color: #888; }
</style>

5.2 代码说明

  • 响应式数据：todos（任务列表）、newTodoText（新任务输入）、filterStatus（过滤状态）都是用ref创建的响应式数据。
  • 计算属性：filteredTodos依赖todos和filterStatus——当用户修改过滤状态（比如切换到“未完成任务”）或修改任务的完成状态时，filteredTodos会自动重新计算，更新任务列表。
  • 方法：addTodo用于添加新任务，通过push修改todos（响应式数据），触发计算属性更新。

5.3 运行效果

  1. 输入任务并按回车键，新任务会添加到列表中。
  2. 切换过滤状态（全部/未完成/已完成），任务列表会自动过滤。
  3. 点击任务前的checkbox，任务状态会切换，计算属性会自动更新列表。

6 课后 Quiz

通过以下问题巩固所学知识（答案附后）：

6.1 问题1

计算属性与方法的核心区别是什么？请用代码示例说明。

6.2 问题2

以下计算属性是否正确？如果错误，请指出原因并修正。

const wrongComputed = computed(() => {
  todos.value.filter(todo => todo.completed)
})

6.3 问题3

在实战示例中，当用户修改filterStatus的值时，filteredTodos会发生什么变化？为什么？

6.4 答案解析

  1. 问题1答案：
    核心区别是缓存机制。计算属性会缓存结果（依赖变化时更新），方法每次调用都重新执行。
    示例：

    // 计算属性：仅当todos变化时重新计算
const completedCount = computed(() => todos.value.filter(t => t.completed).length)
// 方法：每次调用都重新过滤
const getCompletedCount = () => todos.value.filter(t => t.completed).length

  2. 问题2答案：
    错误。计算属性必须返回一个值，否则Vue无法缓存结果。
    修正：

    const correctComputed = computed(() => {
  return todos.value.filter(todo => todo.completed) // 添加return
})

  3. 问题3答案：
    filteredTodos会重新计算并返回新的过滤列表。因为filterStatus是响应式数据，计算属性filteredTodos依赖它——当filterStatus变化时，Vue会触发计算属性重新计算。

7 常见报错与解决方案

在使用计算属性时，初学者常遇到以下问题：

7.1 报错1：计算属性没有返回值

错误示例：

const noReturn = computed(() => {
  todos.value.filter(t => t.completed) // 没有return！
})

原因：计算属性的函数必须返回一个值，否则Vue无法缓存结果或更新视图。
解决：添加return语句，确保函数有返回值。

7.2 报错2：依赖未被正确追踪

错误示例：

// 非响应式数据：无法被Vue追踪
const nonReactiveFilter = { status: 'completed' }
const filteredTodos = computed(() => {
  return todos.value.filter(t => t.completed === nonReactiveFilter.status)
})

现象：修改nonReactiveFilter.status时，filteredTodos不会更新。
原因：计算属性只能追踪响应式数据（ref/reactive包裹的数据）的变化。
解决：将非响应式数据转为响应式：

const reactiveFilter = ref({ status: 'completed' }) // 用ref包裹
const filteredTodos = computed(() => {
  return todos.value.filter(t => t.completed === reactiveFilter.value.status)
})

7.3 报错3：无限循环

错误示例：

const count = ref(0)
// 计算属性依赖自己，导致无限循环
const infiniteLoop = computed(() => {
  count.value++ // 修改了依赖的响应式数据
  return count.value
})

现象：页面崩溃或控制台报错“Maximum call stack size exceeded”。
原因：计算属性的逻辑修改了自己的依赖（count），导致无限触发重新计算。
解决：确保计算属性是纯函数（不修改依赖的响应式数据，仅根据依赖计算结果）。

参考链接

avatar
文章
阅读
粉丝