Vue前端篇——Vue 3中的计算属性（computed）

前言

在Vue 3中，计算属性提供了一种高效的方式来处理数据计算，尤其是当计算结果依赖于多个响应式数据时。与之相比，直接在模板中进行计算可能会导致性能问题和不必要的重复计算。

计算属性的优势

计算属性具有缓存机制，只有当依赖的数据发生变化时才会重新计算。这意味着，如果模板中多次使用同一个计算属性，并且依赖的数据没有变化，那么计算属性的函数只会执行一次。这种缓存机制可以显著提高应用的性能。

直接计算的问题

如果没有使用计算属性，而是直接在模板中进行计算，那么每次模板渲染时都会执行计算函数。这不仅会导致不必要的性能开销，还可能导致代码难以维护和理解。

对比示例

使用计算属性的情况

代码语言：html

复制

<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span> <!-- 计算属性只执行一次 -->
  </div>
</template>
<script setup lang="ts" name="Person_Vue3_Computed">

import { ref, computed } from 'vue'; // 引入computed
let firstName = ref('zhang'); // 响应式引用，存储姓氏

let lastName = ref('san');  // 响应式引用，存储名字
// 使用计算属性来生成全名

let fullName = computed(() => {

console.log('fullName被计算了'); // 仅在第一次渲染时输出

return ${firstName.value.charAt(0).toUpperCase()}${firstName.value.slice(1)} - ${lastName.value};

});

</script>

在上面的代码中，fullName是一个计算属性，它依赖于firstName和lastName。当我们输入姓氏和名字时，fullName会自动更新。但是，无论fullName在模板中被使用多少次，计算属性的函数只会在第一次渲染时执行一次。

直接计算的情况

代码语言：html

复制

<template>

<div class="person">

姓：<input type="text" v-model="firstName"> <br>

名：<input type="text" v-model="lastName"> <br>

全名：<span>{{ firstName.value.charAt(0).toUpperCase() + firstName.value.slice(1) }} - {{ lastName.value }}</span> <!-- 每次渲染都会执行计算 -->

</div>

</template>
<script setup lang="ts" name="Person_Vue3_Computed">

import { ref } from 'vue'; // 不需要引入computed
let firstName = ref('zhang'); // 响应式引用，存储姓氏

let lastName = ref('san');  // 响应式引用，存储名字

</script>

在上面的代码中，我们没有使用计算属性，而是直接在模板中进行了全名的计算。这意味着，每次模板渲染时都会执行全名的计算，即使姓氏和名字没有发生变化。这种方式会导致不必要的性能开销。

结论

通过对比可以看出，使用计算属性可以有效地避免重复计算，提高应用的性能。同时，计算属性还能让我们更清晰地组织和管理代码，使组件的逻辑更加易于理解和维护。因此，在Vue 3中，推荐使用计算属性来处理依赖响应式数据的计算任务。