vue3 setup computed

作者：哥伤不起发布日期:2025-04-20 浏览:121

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

// 假设我们有一个响应式的数据 source
const source = ref(1);

// 使用 computed 创建一个计算属性 doubled
const doubled = computed(() => {
  return source.value * 2;
});

// 当 source 发生变化时，doubled 会自动重新计算
</script>

<template>
  <div>
    <p>Source: {{ source }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="source++">Increment Source</button>
  </div>
</template>

解释说明：

ref：用于创建一个响应式的变量 source，初始值为 1。
computed：用于定义一个计算属性 doubled，它依赖于 source 的值，并返回 source 的两倍。
每当 source 的值发生变化时，doubled 会自动重新计算并更新视图中的显示内容。
在模板中，我们绑定了 source 和 doubled 的值，并提供了一个按钮来增加 source 的值。

上一篇：vue screenfull

下一篇：vue等待几秒