ref和reactive分别编写的计数器

使用ref函数和reactive函数写的技术器小程序，ref的实现用到了reactive，推荐使用ref，代码

点击查看代码

<script > //setup是组合是API的体现
import {reactive, ref} from 'vue'
  export default{
    
    setup() {
      const status=reactive({
        count:0
      })
      const state=ref(0)
      const setCount1=()=>{
        status.count++
      }
      const setCount2=()=>{
        state.value++
      }
      return {
        status,
        setCount1,
        state,
        setCount2
      }
  }
}
</script>


<!-- //模板支持多个根目录 -->
<template>
  <div>
  <button @click="setCount1">{{ status.count }}</button>
  <button @click="setCount2">{{ state }}</button>
</div>
</template>

<style scoped>
button{
  height: 30px;
  width: 30px;
}
</style>