Vue 3 计算属性

犬小哈 2023-10-02 11:05:59

大家好，我是小哈~

在前端开发中，数据的处理和展示是一个非常重要的课题。Vue 提供了一种强大而优雅的机制来处理数据逻辑，那就是计算属性（Computed Properties），这种属性会自动监听依赖值的变化，当依赖值变化时，计算属性会重新计算。这不仅使得代码更加清晰易懂，还提供了性能上的优势。那么，在本小节中，我们就来学习一下这个强大的特性。

一、计算属性的优势

使用计算属性的主要优势包括：

自动响应依赖变化：计算属性会自动监听它们的依赖值。当依赖值发生变化时，计算属性会自动重新计算，确保计算结果始终是最新的。
缓存机制提高性能：计算属性会缓存依赖值的计算结果。当依赖值不发生变化时，计算属性会直接返回缓存的结果，避免了不必要的重复计算，提高了性能。
简化模板逻辑：将复杂的逻辑处理放入计算属性中，可以使模板更加简洁易读。这种清晰的逻辑分离使得代码更易于维护和理解。
逻辑复用：计算属性可以根据不同的需求，通过组合依赖值生成不同的计算结果。这种逻辑的复用性使得代码更加灵活。

二、使用示例

2.1 计算商品价格

需求描述：商品的原价是固定的，折扣可在输入框中动态修改，要求实时显示最终到手价格！

以下是使用计算属性来实现该功能的示例代码：

<template>
  <div>
    <p>商品原价：{{ goods.price }}</p>
    <p>折扣：<input v-model="goods.discount"></p>
    <p>最终价格：{{ discountedPrice }}</p>
  </div>
</template>

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

const goods = reactive({
  // 原价
  price: 100,
  // 折扣价
  discount: 0.1
})

// 最终价格
const discountedPrice = computed(() => goods.price * (1 - goods.discount))
</script>

在这个例子中，discountedPrice 是一个计算属性，它依赖于 goods 商品对象中的 price 和 discount 两个属性的值。当 price 或 discount 发生变化时，discountedPrice 会自动重新计算，并渲染到页面中。

2.2 筛选书籍

需求描述：有四本书，用户可在输入框中动态输入查询关键词，要求实时查询出包含关键词的书名！

以下是通过计算属性实现该功能的示例代码：

<template>
  <div>
    <input v-model="searchText" placeholder="请输入查询关键词" />
    <ul>
      <li v-for="(item, index) in computedBooks" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

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

let books = [
  '犬小哈教程',
  'Java 教程',
  'Vue3 项目实战',
  'Spring Boot 项目实战',
]

// 查询关键词
const searchText = ref('')
// 筛选后的书籍
const computedBooks = computed(() => {
  const newBooks = books.filter(book => book.includes(searchText.value))
  return newBooks
})
</script>

在这个例子中，computedBooks 是一个计算属性，它依赖于 searchText 查询关键词这个变量。当 searchText发生变化时，computedBooks 会自动重新计算，从 books 数组中实时筛选出包含对应关键词的数据。