Vue3 hooks 语法糖(setup)

作用：功能分开

1、创建

src/hooks/useSum.ts

2、uesSum.ts文件

import { onMounted, ref } from 'vue';

// 属性、方法写在一个函数里
export default ()=>{
    let num = ref(0)
    function addNum(){
        num.value += 1
    }
    onMounted(()=>{
        num.value = 100
    })
    return {num, addNum}
}

3、使用

<template>
    数量:{{ num }}
    <button @click="addNum">自增</button>
</template>

<script lang="ts" setup name="Person">
import useSum from '@/hooks/useSum';
let {num, addNum} = useSum()

</script>

<style>

</style>