【vue3|第8期】深入理解Vue 3 computed计算属性

Commas.KM

已于 2024-07-11 09:22:57 修改

阅读量1k

点赞数 31

分类专栏： Vue 文章标签： vue.js 前端 javascript 计算属性 computed getter setter

于 2024-06-11 08:00:00 首次发布

本文链接：https://blog.csdn.net/qq_35844043/article/details/139585020

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

日期：2024年6月10日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

在这里插入图片描述

一、前言

在 Vue3 的世界里，计算属性（computed）是一个非常强大且实用的特性。它为我们在处理数据依赖和动态计算方面提供了极大的便利。今天，就让我们一起来深入探讨 Vue3 中的 computed。

二、计算属性的基本概念

计算属性本质上是基于其依赖的数据进行计算并返回结果的属性。它可以根据已有的数据自动计算出一个新的值，并且只有在其依赖的数据发生变化时才会重新计算。

换而言之，计算属性允许我们声明式地定义一个依赖于其他数据的计算值。在 Vue2 中，计算属性是基于 getter 和 setter 实现的。而在 Vue3 中，计算属性得到了进一步的优化，使用了 ES6 的 Proxy 特性，使得实现更为简洁和高效。

三、计算属性的优势

响应式依赖：计算属性是基于其依赖项进行缓存的。如果依赖项发生变化，计算属性会重新计算并更新。这使得我们能够更好地管理响应式数据。
简洁的语法：Vue3 中的计算属性使用了 ES6 的 Proxy 特性，使得代码更加简洁易读。
高效的性能：由于计算属性是基于依赖项进行缓存的，因此只有当依赖项发生变化时才会重新计算，这大大提高了应用程序的性能。这种缓存机制也使得 computed 属性在性能上优于 methods 方法，尤其是在复杂计算中。

四、计算属性与方法的区别

虽然计算属性和方法都能实现相同的功能（基于数据计算值），但它们在本质上是不同的。

计算属性是基于其依赖的数据进行缓存的，只有在数据变化时才会重新计算。
方法是每次调用时都会执行相应的函数体，无论依赖的数据是否发生变化。

五、计算属性的 getter 和 setter

计算属性不仅可以有 getter 函数用于获取计算结果，还可以定义 setter 函数来实现对计算结果的设置，从而影响其依赖的数据。

fullName = computed{
    get() {
      return this.firstName + ' + this.lastName;
    },
    set(value) {
      const [firstName, lastName] = value.split(' ');
      this.firstName = firstName;
      this.lastName = lastName;
    }
}

六、Computed属性的基本应用

在 Vue3 中，使用计算属性非常简单。首先，我们需要在组件的 computed 选项中定义计算属性：

<script setup>
import { ref, computed } from 'vue';
const count = ref(0);

// 计算属性声名
const doubled = computed(() => count.value * 2);
</script>

在上面的例子中，我们定义了一个名为 doubled 的计算属性，它依赖于 count 变量。每当 count 发生变化时，doubled 也会重新计算。

七、Computed属性的高级应用

除了基本的数据计算，computed 属性还可以用于更复杂的场景，如**处理异步操作****和依赖多个数据源。**例如，我们可以使用 computed 属性来过滤一个列表：

<template>
  <div>
    <input v-model="searchText" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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



    const searchText = ref('');
    const items = ref([
      { id: 1, name: 'Commas.1' },
      { id: 2, name: 'Commas.2' },
    ]);

    // 计算属性声名
    const filteredItems = computed(() => {
      if (!searchText.value) {
        return items.value;
      }
      return items.value.filter(item => item.name.includes(searchText.value));
    });

</script>

在这个例子中，filteredItems 是一个 computed 属性，它根据 searchText 的值来过滤 items 列表。当用户输入搜索文本时，列表会自动更新以显示匹配的项目。

八、注意事项

计算属性应该避免进行复杂的 DOM 操作或异步操作，这些操作应该放在 methods 或生命周期钩子中处理。
当计算属性依赖的数据发生变化时，Vue 会自动重新计算该计算属性的值。但是，如果计算属性依赖的数据是异步获取的（例如从 API 请求中获取），那么你可能需要使用 watch 或其他机制来确保在数据真正变化时重新计算计算属性的值。