vue3 计算属性（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Vue.js 的开发过程中，vue3 计算属性是一个高频使用的特性，它通过声明式的方式解决了数据动态处理的常见需求。无论是对列表进行过滤、格式化文本，还是在表单中验证输入内容，计算属性都能以简洁高效的方式实现这些功能。对于编程初学者和中级开发者而言，掌握这一特性不仅能提升代码的可维护性，还能显著减少重复逻辑的编写。本文将通过循序渐进的讲解、实际案例与对比分析，帮助读者全面理解 vue3 计算属性的核心原理与应用场景。

一、计算属性的基本概念与核心优势

1.1 什么是计算属性？

计算属性（Computed Properties）是 Vue 中用于定义依赖其他响应式数据的派生值的特性。它通过 computed 函数或选项式 API 的 computed 属性声明，能够自动追踪其依赖的数据变化，并在数据更新时重新计算属性值。

形象比喻：
可以将计算属性想象成一个“智能厨师”。当厨房（Vue 组件）中的食材（响应式数据）发生变化时，厨师会自动判断是否需要重新烹饪（重新计算属性值），而无需手动干预。

1.2 计算属性的核心优势

对比普通方法：
若直接在模板中调用方法（如 {{ formatText() }}），每次视图更新都会执行该方法，即使依赖的数据未发生变化。而计算属性通过缓存机制，仅在相关数据变化时重新计算，性能更优。

二、计算属性的使用场景与代码实践

2.1 基础用法：格式化文本

场景：将用户输入的文本转换为全大写并显示。

代码示例：

import { ref, computed } from 'vue';  

export default {  
  setup() {  
    const inputText = ref('');  
    const uppercaseText = computed(() => inputText.value.toUpperCase());  

    return {  
      inputText,  
      uppercaseText  
    };  
  }  
};  

模板部分：

<input v-model="inputText" placeholder="输入文本">  
<p>大写文本：{{ uppercaseText }}</p>  

关键点：

• 通过 v-model 实现双向绑定，inputText 是响应式数据。
• uppercaseText 依赖 inputText，当输入变化时自动触发重新计算。

2.2 进阶场景：动态列表过滤

场景：根据搜索关键词动态过滤一个商品列表。

数据准备：

const products = ref([  
  { name: '笔记本电脑', price: 8999 },  
  { name: '无线耳机', price: 599 },  
  { name: '蓝牙键盘', price: 399 }  
]);  
const searchKeyword = ref('');  

计算属性实现：

const filteredProducts = computed(() => {  
  const keyword = searchKeyword.value.toLowerCase();  
  return products.value.filter(product =>  
    product.name.toLowerCase().includes(keyword)  
  );  
});  

模板渲染：

<input v-model="searchKeyword" placeholder="搜索商品">  
<ul>  
  <li v-for="product in filteredProducts" :key="product.name">  
    {{ product.name }} - ￥{{ product.price }}  
  </li>  
</ul>  

优势分析：

• 自动响应：当 searchKeyword 或 products 发生变化时，filteredProducts 自动更新，无需手动触发。
• 代码简洁：过滤逻辑集中于计算属性，模板仅需直接使用 filteredProducts。

三、计算属性与方法的对比分析

3.1 核心区别

3.2 实际选择建议

• 优先使用计算属性：当逻辑结果仅依赖组件内的响应式数据，并且需要缓存时。
• 使用方法：当需要执行异步操作、修改状态（如提交表单）或无依赖的通用函数时。

案例对比：

// 计算属性（推荐）  
const total = computed(() =>  
  cartItems.value.reduce((sum, item) => sum + item.price, 0)  
);  

// 普通方法（非推荐）  
const getTotal = () => {  
  return cartItems.value.reduce((sum, item) => sum + item.price, 0);  
};  

四、计算属性的高级用法与技巧

4.1 可写计算属性（Getter/Setter）

通过定义 get 和 set 方法，可以创建可读写的计算属性。

场景：将表单输入内容存储为大写，同时允许外部直接赋值。

const userNickname = ref('');  
const uppercaseNickname = computed({  
  get() {  
    return userNickname.value.toUpperCase();  
  },  
  set(newValue) {  
    // 直接赋值时，自动转换为小写  
    userNickname.value = newValue.toLowerCase();  
  }  
});  

模板使用：

<!-- 输入时自动转大写 -->  
<input v-model="uppercaseNickname">  

<!-- 外部赋值时自动转小写 -->  
<button @click="uppercaseNickname = 'HELLO WORLD'">赋值测试</button>  

4.2 依赖链与性能优化

计算属性的依赖链可能影响性能。例如：

// 不良示例：嵌套计算属性可能导致重复计算  
const A = computed(() => someData.value * 2);  
const B = computed(() => A.value + 5);  
const C = computed(() => B.value * 3);  

// 优化方式：合并计算逻辑  
const C = computed(() => (someData.value * 2 + 5) * 3);  

五、常见问题与解决方案

5.1 为什么计算属性没有更新？

可能原因：

• 依赖的数据未正确声明为响应式（如未使用 ref 或 reactive）。
• 计算属性的依赖链断裂（例如直接修改了原始数据而非响应式引用）。

解决方案：

// 正确声明响应式数据  
const count = ref(0);  

// 错误写法：直接修改原始值  
count = 1; // ❌ 应改为 count.value = 1  

// 正确计算属性  
const doubleCount = computed(() => count.value * 2);  

5.2 如何调试计算属性？

• 在 get 方法中添加 console.log，观察触发条件。
• 使用浏览器的 Vue Devtools 查看响应式依赖关系。

六、总结与扩展

通过本文的讲解，读者应已掌握 vue3 计算属性的核心概念、使用场景及高级技巧。计算属性不仅简化了数据处理逻辑，还通过缓存机制优化了性能，是 Vue 开发中不可或缺的工具。

进阶方向：

1. 结合 watch 监听计算属性的变化，实现更复杂的状态管理。
2. 在组合式 API 中使用 computed 与 ref 的组合，构建可复用的逻辑模块。
3. 深入理解 Vue 的响应式系统，探索 computed 的底层原理。

通过持续实践与探索，开发者能够将 vue3 计算属性的潜力最大化，写出更优雅、高效的 Vue 3 代码。