1、setup和自定义hook

一、Hooks/CountHook.js

import { reactive, toRefs } from "vue"
export const useCounter = ()=>{
    const state  = reactive({
        count:0,
        add(){
            state.count++
        }
    })
    const refState = toRefs(state);
    return refState
}

二、父组件

<template>
   <div>
     <button @click="add">{{count}}</button>
   </div>
</template>
<script setup>
import {useCounter} from './Hooks/CountHook'
const {add,count}=useCounter()
</script>