Vue3.0实现todolist-计算属性

<template>
  <div>
    <nav-header></nav-header>
    <nav-main></nav-main>
    <nav-footer></nav-footer>

    <div>{{ num1 }}---{{ num2 }}</div>
    <div>两个数的和{{ addNum }}</div>
  </div>
</template>

<script>
import NavHeader from "@/components/navHeader/NavHeader.vue";
import NavMain from "@/components/navMain/NavMain.vue";
import NavFooter from "@/components/navFooter/NavFooter.vue";

//reactive定义对象类型的数据
import { defineComponent, ref, computed } from "vue";

export default defineComponent({
  name: "Home",
  props: {},
  components: {
    NavHeader,
    NavMain,
    NavFooter,
  },
  setup() {
    let num1 = ref(10);
    let num2 = ref(20);
    let addNum = computed(() => {
      return num1.value + num2.value;
    });

    return {
      num1,
      num2,
      addNum,
    };
  },
});
</script>

<style>
</style>

<button @click="add">add</button>

 let add=()=>{
      num1.value++
      num2.value++
    }

return {
      add
    };