v-memo 怎么使用 vue3

要使用 Vue 3 中的 v-memo，你需要先安装 Vue 3 和 Vue Composition API。然后在组件中引入 `defineComponent` 和 `computed`。

下面是一个简单的示例：

<template>
  <div>
    <h1>计数器</h1>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";

export default defineComponent({
  setup() {
    const count = computed(() => {
      console.log("计数器重新计算");
      return 0;
    });

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
});
</script>

在上面的示例中，我们使用了 `computed` 来创建一个响应式的计算属性 `count`。在 `setup` 函数中，我们定义了 `increment` 方法来增加计数器的值。`return` 语句把 `count` 和 `increment` 导出，以供模板中使用。

现在，每次点击“+1”按钮时，`count` 计算属性都会重新计算，并打印一条日志。但是，如果我们多次点击按钮，我们会发现计算属性每次都重新计算，这是因为 Vue 3 中的计算属性默认是懒计算的，每次访问计算属性时都会重新计算。如果你想要缓存计算属性的值，可以使用 `v-memo` 指令：

<template>
  <div>
    <h1>计数器</h1>
    <p v-memo="count">{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";

export default defineComponent({
  setup() {
    const count = computed(() => {
      console.log("计数器重新计算");
      return 0;
    });

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
});
</script>

现在，每次点击“+1”按钮时，计算属性 `count` 只会在第一次计算时打印日志。在后续计算中，`v-memo` 指令会缓存计算属性的值，并避免不必要的重新计算。这可以提高应用程序的性能。