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

原创

小明爱吃火锅

发布于 2024-07-26 18:23:57

6970

发布于 2024-07-26 18:23:57

文章被收录于专栏：小明说Java

前言

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

计算属性的优势

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

直接计算的问题

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

对比示例

使用计算属性的情况

<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在模板中被使用多少次，计算属性的函数只会在第一次渲染时执行一次。

直接计算的情况

<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中，推荐使用计算属性来处理依赖响应式数据的计算任务。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S8

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S8

登录后参与评论

0 条评论

热度