Vue3 计算属性

在 Vue3 中，计算属性（computed properties）是一种非常有用的功能，它可以让我们在不改变原有数据结构的情况下，根据已有的数据计算出新的数据。计算属性的值是响应式的，当依赖的数据发生变化时，计算属性的值会自动更新。本文将介绍 Vue3 中计算属性的基本用法和原理。

1. 基本用法

在 Vue3 中，我们可以使用 computed 函数来创建计算属性。以下是一个简单的示例：

<template>
  <div>
    <input v-model="num1" type="number" />
    <input v-model="num2" type="number" />
    <p>两数之和：{{ sum }}</p>
  </div>
</template>

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

    const num1 = ref(0);
    const num2 = ref(0);

    const sum = computed(() => {
      return num1.value + num2.value;
    });

</script>

computed 函数创建了一个计算属性 sum。当 num1 或 num2 的值发生变化时，sum 的值会自动更新

2. 计算属性的缓存策略

Vue3 中的计算属性具有缓存策略，当计算属性的依赖数据没有发生变化时，计算属性会直接返回缓存的结果，而不是重新计算。这样可以提高性能，避免不必要的计算。默认情况下，Vue3 使用的是基于访问频率的缓存策略。如果一个计算属性被多次访问，那么它的结果会被缓存起来，直到依赖的数据发生变化或者手动清除缓存。

要清除计算属性的缓存，可以使用 watchEffect 函数：

const num1 = ref(0); 
const num2 = ref(0); 
let sum; 
watchEffect(() => {
    sum = computed(() => { return num1.value + num2.value; }).value; 
});

在这个示例中，我们使用了 watchEffect 函数来监听 num1 和 num2 的变化，当它们发生变化时，我们会重新计算 sum 的值。这样可以避免因为依赖数据的缓存而导致的问题。