【Vue】vue 中 computed的作用

CrazyPanda发表于：2025-07-25 18:22:08浏览：0次TAG： #Vue

在 Vue 中，computed 是一个用于声明计算属性的选项，其核心作用是 基于现有数据生成派生数据，并具备缓存机制以提升性能。以下是其详细说明和应用场景：

一、核心作用

1. 计算派生数据

将多个数据（如 props、data、其他计算属性）组合或转换为新值，避免在模板中编写复杂逻辑。
示例：

// 模板中使用计算属性
<template>
  <div>
    全名：{{ fullName }}
  </div>
</template>

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

const firstName = ref('张')
const lastName = ref('三')

// 计算属性：基于 firstName 和 lastName 生成
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

2. 缓存机制

计算属性 仅在依赖数据变化时重新计算，否则直接返回缓存值，相比方法调用更高效。
对比示例：

// 方法实现（每次渲染都会执行）
<template>
  <div>{{ getFullName() }}</div>
</template>

<script setup>
const getFullName = () => {
  return `${firstName.value} ${lastName.value}`
}
</script>

// 计算属性实现（仅依赖变化时执行）
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

二、与方法和监听器的对比

特性	计算属性（computed）	方法（methods）	监听器（watch）
缓存机制	✅ 依赖不变则缓存	❌ 每次调用执行	❌ 无缓存
适用场景	复杂数据转换	事件处理	异步操作
触发时机	依赖变化时	主动调用	数据变化时
性能	高	低（重复执行）	中

三、高级用法

1. 计算属性的 setter

默认计算属性是只读的，但可通过定义 setter 实现双向绑定。
示例：

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    const [first, last] = newValue.split(' ')
    firstName.value = first
    lastName.value = last
  }
})

2. 依赖多个数据源

计算属性可依赖组件内的任何响应式数据（如 props、store 状态）。
示例：

import { computed, useStore } from 'vuex'

const store = useStore()

// 依赖 store 中的状态
const totalPrice = computed(() => {
  return store.state.cart.items.reduce((sum, item) => {
    return sum + item.price * item.quantity
  }, 0)
})

四、应用场景

1. 数据格式化（如日期、货币）

const formattedPrice = computed(() => {
  return `¥${price.value.toFixed(2)}`
})

2. 列表过滤 / 排序

const filteredUsers = computed(() => {
  return users.value.filter(user => user.age > 18)
})

3. 表单验证状态

const isFormValid = computed(() => {
  return username.value.length > 0 && password.value.length > 6
})

4. 权限控制

const canEdit = computed(() => {
  return userRole.value === 'admin'
})

五、使用注意事项

1. 避免副作用
计算属性应仅用于计算值，避免在其中执行异步操作或修改其他数据（使用 watch 或 methods）。

2. 依赖必须明确
计算属性的返回值必须完全由其依赖项决定，否则可能导致缓存失效。

3. 避免过度使用

简单计算可直接在模板中实现，复杂逻辑才需要封装为计算属性。

六、总结

computed 是 Vue 中优化数据处理的核心工具，适合：

需要根据现有数据派生新值的场景
需要缓存以提升性能的复杂计算
保持模板简洁，避免逻辑冗余

合理使用计算属性可以使代码更清晰、更高效，尤其在处理复杂数据关系时优势明显。

猜你喜欢

: 【Vue】vue.js怎么定义一个组件; vue.js 中定义组件有三种方法：直接定义在 <script> 标签中并导出组件对象、使用组件工厂函数和 definecomponent 辅助函数创建、使用类定义组件并继承 vue.extend 创建。</script>如何在 Vue.js 中定义组件一、直接定义1. 在 <script></script> 标签中，使用 export default {} 导出组件对象：<code class="html"&g; 发表于：2024-04-21 浏览：244 TAG：

: 【Vue】vue创建应用并运行; 简介Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和; 发表于：2024-04-23 浏览：375 TAG：

: 【Vue】Antd Pro Vue的使用（九） —— 抽屉a-drawer的操作按钮设置; 在antd pro vue2中，a-drawer默认是没有操作按钮的，只有右上角的关闭'X'号，需要自己配置提交和取消按钮提交方法对应@submit方法，取消方法对应@close方法（a-model对应的取消方法是@cancel），都是父页面传过来的方法<a-drawer     :title="model ? '编辑类型' : '新建类型'"; 发表于：2024-05-10 浏览：339 TAG：

: 【Vue】Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（上）; 文章目录📋前言🎯关于 Print.js🧩PDF 打印🧩网页（HTML）打印🧩图像打印🧩JSON 打印🧩下载并安装使用🧩相关配置🎯 Vue3 中使用 Print.js 实战🎯Vue3 + Nodejs + Print.js 模拟打印实战案例🧩启动 Nodejs 服务🧩启动 Vue 项目📝最后📋前言今天久违的更新一下关于 Vue 的文章了，本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享，实战内容包括有打印插件 Print.js 的; 发表于：2023-12-10 浏览：335 TAG：

: 【Vue】Vue 单文件组件 (SFC) 规范; 简介.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块：; 发表于：2024-03-29 浏览：283 TAG：

: 【Vue】vue是什么模式的前端框架; vue 中的 mvvm 架构将应用程序分为 model、view 和 viewmodel：model：包含数据和业务逻辑，独立于视图。view：显示 model 中的数据，使用模板语法进行数据绑定。viewmodel：model 和 view 之间的桥梁，包含与 view 交互的数据和方法，并更新 view。mvvm 在 vue 中的优势包括响应式数据绑定、代码可重用性、提高生产力、易于调试。Vue：MVVM 架构什么是 MVVM？MVVM（Model-View-ViewModel）是一种软件设; 发表于：2024-04-28 浏览：309 TAG：

: 【Vue】Vue中字符串数组和对象常用方法介绍; 在Vue中，数组和字符串是我们最常处理的数据类型。Vue提供了响应式系统，可以自动跟踪数组和对象的变化，并响应式地更新DOM。在Vue中，您可以像在任何JavaScript应用程序中一样操作这些数据类型。下面时整理的Vue中字符串数组以及对象的常用操作方法。一.数组方法1.增删改： unshift、push、splice、shift、pop、splice、slice 1.1.unshift：在数组的头部添加内容// 数组.unshift("添加的值"); 发表于：2024-05-08 浏览：290 TAG：

: 【Vue】Vue中使用vue-router的妙用详解; vue是当前最热门的前端框架之一，它不仅简洁易用，而且具有强大的扩展性，其中一个值得关注的插件就是vue-router。vue-router是vue官方路由插件，它可以更好地控制vue应用中的路由导航，使路由与组件之间的关系更加清晰，提升了用户的交互体验。本文将详细解读vue-router的使用方法及妙用。一、安装和使用在使用vue-router之前，需要先安装它。可以使用npm包管理器来安装vue-router插件。安装命令如下：npm install vue-router; 发表于：2024-04-29 浏览：302 TAG：

: 【Vue】vue中哪些属性可以写异步方法; vue 中可以利用 methods 和 computed 属性定义异步方法。methods: 1. 定义异步方法，使用 async/await 处理异步请求。2. 返回一个 promise 对象。computed: 1. 定义异步计算属性，使用 async/await 处理异步请求。2. 返回派生数据的 promise 对象。Vue 中支持异步方法的属性在 Vue 中，可以使用 methods 和 computed 属性来定义异步方法。methodsmethods 属性中定义的方法可以包含异步操; 发表于：2024-05-16 浏览：217 TAG：

: 【Vue】vue 中 computed的作用; 在 Vue 中，computed 是一个用于声明计算属性的选项，其核心作用是基于现有数据生成派生数据，并具备缓存机制以提升性能。以下是其详细说明和应用场景：; 发表于：2025-07-25 浏览：1 TAG： #Vue

栏目分类全部>