<template>
  <h1>{{num}}*2={{double}}</h1>
  <h1>{{num2.count}}*3={{triple}}</h1>
  <button @click="add">累加</button>

  <button @click="insert">插入</button>
</template>

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


export default defineComponent({
  name: "Vue3",

  setup:()=>{
    const num=ref<number>(1)

    const isAdd=ref<boolean>(false)

    const num2=reactive<{count:number}>({
      count:1
    })

    function add() {
      num.value++
      num2.count++
    }

    function insert(){
      isAdd.value=true
    }

    function cancel(){
      isAdd.value=false
    }

    const double=computed<number>(()=>num.value*2)

    const triple=computed<number>(()=>num2.count*3)

    return {num,add,double,num2,triple,isAdd,insert,cancel}
  }
})
</script>

<style scoped>

</style>