vue3 setup语法糖中使用计算属性，计算两个数的和

<template>  
  <div>  
    <input type="number" v-model="num1" placeholder="输入第一个数字">  
    <input type="number" v-model="num2" placeholder="输入第二个数字">  
    <p>总和: {{ total }}</p>  
  </div>  
</template>  
  
<script lang="ts">  
import { ref, computed } from 'vue';  
  
export default {  
  setup() {  
    const num1 = ref(0);  
    const num2 = ref(0);  
  
    const total = computed(() => num1.value + num2.value);  
  
    return {  
      num1,  
      num2,  
      total  
    };  
  }  
};  
</script>

<template>
    <div>
        num1: <input type="text" :value="num1"><br>
        num2: <input type="text" :value="num2"><br>
        总数： {{ total }}
    </div>
</template>

<script lang="ts" setup>
import { ref ,computed } from 'vue';

const num1 = ref(1)
const num2 = ref(2)

const total = computed(() => num1.value + num2.value);


</script>

<style lang="less" scoped>
div {
    width: 500px;
    height: 600px;
    background-color: orchid;
}
</style>

上面的代码中：

• 我们使用了 ref 来创建两个响应式的变量 num1 和 num2。
• 使用 computed 创建了一个计算属性 total，它会返回 num1 和 num2 的和。
• 在模板中，我们使用 v-model 指令将输入框的值与 num1 和 num2 绑定。
• 最终，我们在模板中显示了计算属性 total 的值。

在Vue 3 的 Composition API 中，当 num1 或 num2 的值发生变化时，由于 total 是一个计算属性，它会自动重新计算并更新其值。计算属性是基于它们的依赖进行缓存的，只有在其依赖发生改变时才会重新计算。

上述示例中，total 依赖于 num1.value 和 num2.value。因此，每当 num1.value 或 num2.value 发生变化时，total 都会自动重新计算并更新其值。

所以，不需要手动触发任何事件或方法来更新 total 的值。只要确保 num1 和 num2 的值是响应式的， total 就会自动更新。