vue3从精通到入门9：计算属性computed

2024-04-17 22:43:18

在 Vue 3 中，computed 是一个用于创建计算属性的工具，它基于组件的响应式依赖进行复杂的计算，并返回一个新的响应式引用。计算属性是 Vue 的一个核心概念，它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。

computed使用：

计算属性与常规属性类似，但是它们是基于它们的依赖进行缓存的。只有当计算属性依赖的响应式数据发生变化时，它们才会重新求值。这意味着只要依赖没有变化，多次访问计算属性会立即返回之前缓存的结果，而不会重新执行计算逻辑。

使用方法：

<template>  
  <div>  
    <p>原始值: {{ count }}</p>  
    <p>计算后的值: {{ doubleCount }}</p>  
    <button @click="increment">增加</button>  
  </div>  
</template>  
  
<script setup>  
import { ref, computed } from 'vue';  
  
// 创建响应式数据  
const count = ref(0);  
  
// 创建计算属性  
const doubleCount = computed(() => count.value * 2);  
  
// 定义方法  
function increment() {  
  count.value++;  
}  
</script>

count 是一个响应式数据，而 doubleCount 是一个计算属性，它返回 count 的两倍。当 count 的值发生变化时，doubleCount 会自动更新。

使用计算属性的好处是它们能够减少不必要的计算和渲染，提高性能。此外，它们还使得组件的逻辑更加清晰和易于维护。

computed的使用场景

1. 复杂数据转换

当你需要从响应式数据中派生出一个经过计算或转换的新值时，可以使用 computed。例如，你可能有一个日期对象，而你想在模板中显示格式化的日期字符串。

<template>  
  <p>格式化后的日期: {{ formattedDate }}</p>  
</template>  
  
<script setup>  
import { ref, computed } from 'vue';  
  
const date = ref(new Date());  
  
const formattedDate = computed(() => {  
  return date.value.toLocaleDateString();  
});  
</script>

2. 依赖多个数据源的属性

如果你的计算属性依赖于多个响应式数据项，并且当这些数据项中的任何一个改变时，你都希望重新计算该属性，那么 computed 是非常有用的。

<template>  
  <p>总价: {{ totalPrice }}</p>  
</template>  
  
<script setup>  
import { ref, computed } from 'vue';  
  
const quantity = ref(2);  
const pricePerItem = ref(10);  
  
const totalPrice = computed(() => {  
  return quantity.value * pricePerItem.value;  
});  
</script>

3. 减少模板中的复杂逻辑

在模板中直接编写复杂的逻辑表达式可能会导致代码难以阅读和维护。使用 computed 可以将这些逻辑封装起来，使模板更加简洁清晰。

<template>  
  <p v-if="isUserActive">用户活跃</p>  
  <p v-else>用户不活跃</p>  
</template>  
  
<script setup>  
import { ref, computed } from 'vue';  
  
const lastActivity = ref(new Date(2023, 6, 1)); // 假设这是用户最后一次活动的日期  
  
const isUserActive = computed(() => {  
  const now = new Date();  
  const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000); // 一小时前  
  return lastActivity.value > oneHourAgo;  
});  
</script>

4. 优化性能

计算属性会缓存其值，只有当其依赖的响应式数据发生变化时，才会重新计算。这种缓存机制可以帮助避免不必要的计算和渲染，从而提高应用程序的性能

与 `watch` 对比

虽然 watch 也可以用来观察和响应数据变化，但它主要用于执行异步操作或开销较大的操作。相比之下，computed 更适合用于同步计算，且由于它的缓存机制，通常比 watch 更高效。

computed函数的原理

computed函数的原理主要是基于Vue的响应式系统，通过getter和setter函数来创建和管理计算属性。

1. 响应式依赖收集：当在组件中定义计算属性时，Vue会为该计算属性创建一个getter函数。这个getter函数的作用就是返回计算属性的值。在getter函数执行的过程中，它可能会访问其他响应式数据（如data中的属性或props等）。每当getter函数访问这些响应式数据时，Vue的响应式系统会记录下这些依赖关系，即计算属性依赖于哪些响应式数据。

2. 缓存机制：计算属性的一个关键特性是它具有缓存机制。这意味着，只要计算属性所依赖的响应式数据没有发生变化，那么多次访问计算属性时，都会直接返回之前计算并缓存的结果，而不会重新执行getter函数中的计算逻辑。这种缓存机制大大提高了性能，避免了不必要的重复计算。

3. 依赖更新与重新计算：当计算属性所依赖的响应式数据发生变化时，Vue的响应式系统会触发依赖更新。这个过程会标记计算属性为“脏”状态，表示其值可能不再是最新的。在下一个组件更新周期中，Vue会重新执行计算属性的getter函数，以获取最新的计算结果，并更新缓存。这样，组件中绑定计算属性的地方就能显示最新的数据。

4. Setter函数：虽然大多数情况下我们主要关注计算属性的getter函数，但computed属性实际上也支持setter函数。setter函数在计算属性的值被显式修改时调用。然而，在实际开发中，我们通常会避免直接修改计算属性的值，因为这样会破坏其响应式依赖和缓存机制。如果需要修改计算属性的值，通常应该修改它所依赖的原始响应式数据。

总结：computed函数的原理是通过getter和setter函数来实现计算属性的创建、缓存、依赖收集和更新。这使得计算属性能够自动响应其依赖的响应式数据的变化，并在需要时重新计算值，从而保持与数据的同步，并优化性能。

码农公寓