在这个示例中，我们将探讨 Vue.js 3 的 Composition API 中的一个高级用法。我们将使用 setup 函数来创建一个响应式的组件状态，并通过 watchEffect 或 watch 来观察这些状态的变化。
示例概述
在 example4 中，我们将创建一个简单的计算器组件，它具有两个输入框，用于输入数字，并显示它们的和。当输入值变化时，和会自动更新。
代码示例
<template>
<div>
<input v-model.number="number1" type="number" placeholder="输入第一个数字" />
<input v-model.number="number2" type="number" placeholder="输入第二个数字" />
<p>它们的和是：{{ sum }}</p>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const number1 = ref(0);
const number2 = ref(0);
const sum = computed(() => {
return number1.value + number2.value;
});
return { number1, number2, sum };
}
};
</script>
扩展阅读
如果你想要了解更多关于 Vue.js Composition API 的信息，请访问我们的 Vue.js Composition API 教程。