【Vue】15 Vue技术——Vue计算属性简写：提升代码简洁性的高效实践

文章目录

- 前言
- 什么是计算属性？
- 计算属性简写形式
- - [标准写法 vs 简写写法](#标准写法 vs 简写写法)
- 案例解析
- 核心特点解析
- - [1. **缓存机制**](#1. 缓存机制)
  - [2. **自动依赖追踪**](#2. 自动依赖追踪)
  - [3. **响应式更新**](#3. 响应式更新)
- 适用场景
- - [✅ **适合使用简写的情况**](#✅ 适合使用简写的情况)
  - [❌ **不适合使用简写的情况**](#❌ 不适合使用简写的情况)
- 实际应用示例
- - 示例1：价格计算
  - 示例2：用户信息格式化
- 最佳实践建议
- - [1. **命名规范**](#1. 命名规范)
  - [2. **保持纯粹**](#2. 保持纯粹)
  - [3. **性能优化**](#3. 性能优化)
  - [4. **代码组织**](#4. 代码组织)
- 常见问题解答
- - [Q1: 计算属性和方法(methods)有什么区别？](#Q1: 计算属性和方法(methods)有什么区别？)
  - [Q2: 什么时候应该使用完整写法？](#Q2: 什么时候应该使用完整写法？)
  - [Q3: 计算属性中可以包含异步操作吗？](#Q3: 计算属性中可以包含异步操作吗？)
- 总结

前言

什么是计算属性？

在Vue.js中，计算属性是一种基于响应式依赖进行缓存计算的特性。当计算属性所依赖的响应式数据发生变化时，计算属性会自动重新计算，否则直接返回缓存结果，大大提高了性能。

计算属性简写形式

标准写法 vs 简写写法

标准写法（完整语法）：

javascript 复制代码

computed: {
  fullname: {
    get() {
      return this.firstname + '-' + this.lastname;
    },
    set(value) {
      // 如果需要设置值时的逻辑
    }
  }
}

简写写法（只读情况）：

javascript 复制代码

computed: {
  fullname() {
    console.log('get被调用了');
    return this.firstname + '-' + this.lastname;
  }
}

案例解析

让我们通过一个完整的示例来理解计算属性简写的使用：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性简写</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" :value="firstname"> <br/><br>
        名：<input type="text" :value="lastname"> <br/><br>
        姓名：<span>{{fullname}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                firstname:'张',  
                lastname:'三'
            },
            computed:{
                // 简写形式：当只需要读取，不需要修改时使用
                fullname(){
                    console.log('get被调用了');
                    return this.firstname + '-' + this.lastname;
                }
            }
        })
    </script>
</body>
</html>

核心特点解析

1. 缓存机制

计算属性具有智能缓存功能：

当 firstname 或 lastname 发生变化时，fullname 会重新计算
在依赖数据未变化时，多次访问 fullname 只会触发一次计算
控制台日志"get被调用了"只在重新计算时输出

2. 自动依赖追踪

Vue会自动追踪计算属性中的依赖关系：

javascript 复制代码

fullname(){
    // Vue会自动追踪 this.firstname 和 this.lastname 作为依赖
    return this.firstname + '-' + this.lastname;
}

3. 响应式更新

当输入框中的值变化时（实际应用中需要配合v-model）：

数据变化 → 计算属性重新计算 → 视图自动更新

适用场景

✅ 适合使用简写的情况

只读计算：只需要获取值，不需要设置值
数据格式化：如日期格式化、金额格式化
复杂逻辑计算：多个数据源的综合计算
过滤/筛选数据：从数组中筛选符合条件的项

❌ 不适合使用简写的情况

需要双向绑定：需要通过v-model绑定计算属性
需要设置值：需要在设置值时执行特定逻辑
异步计算：需要处理异步操作

实际应用示例

示例1：价格计算

javascript 复制代码

computed: {
    // 计算总价（简写形式）
    totalPrice() {
        return this.quantity * this.unitPrice;
    },
    
    // 计算折扣价
    discountedPrice() {
        return this.totalPrice * (1 - this.discountRate);
    }
}

示例2：用户信息格式化

javascript 复制代码

computed: {
    // 格式化用户全名
    userFullName() {
        return `${this.user.lastName} ${this.user.firstName}`;
    },
    
    // 格式化用户地址
    formattedAddress() {
        return `${this.user.province} ${this.user.city} ${this.user.district}`;
    }
}

最佳实践建议

1. 命名规范

使用描述性的名词作为计算属性名称
如：fullName、totalPrice、isAvailable

2. 保持纯粹

不要在计算属性中执行副作用操作（如API调用）
计算属性应该是纯函数，只依赖输入返回输出

3. 性能优化

避免在计算属性中进行复杂耗时的计算
对于复杂计算，考虑使用methods或watch

4. 代码组织

javascript 复制代码

computed: {
    // 基本信息计算
    fullName() { /* ... */ },
    age() { /* ... */ },
    
    // 业务逻辑计算
    isEligible() { /* ... */ },
    discountAmount() { /* ... */ },
    
    // 显示格式化
    formattedDate() { /* ... */ },
    currencyAmount() { /* ... */ }
}

常见问题解答

Q1: 计算属性和方法(methods)有什么区别？

计算属性 ：有缓存，依赖变化时才重新计算
方法：每次调用都会重新执行

Q2: 什么时候应该使用完整写法？

当需要通过v-model双向绑定计算属性，或在设置值时需要执行特定逻辑时。

Q3: 计算属性中可以包含异步操作吗？

不建议。如果需要异步操作，请使用watch或methods配合异步函数。

总结

Vue的计算属性简写形式提供了一种简洁、高效的方式来处理派生数据。通过使用简写形式，我们可以：

减少代码量：去掉不必要的get/set声明
提高可读性：代码更加直观清晰
保持性能：依然享受Vue的缓存优化
提升开发效率：专注于业务逻辑而非样板代码

记住关键原则：当计算属性只需要读取不需要修改时，使用简写形式；当需要双向绑定或设置逻辑时，使用完整形式。

掌握计算属性简写技巧，能让你的Vue代码更加简洁优雅，同时保持高性能和可维护性。