Vue3-自定义hook函数

• 功能：可以将组合式API封装成一个函数，用于解决代码复用的问题。
• 注意：需要在src文件夹下创建一个文件夹hooks，在里面放js文件，命名随意，主要是将setup函数中的代码放入js文件中。

// sum.js
import { reactive } from 'vue'
export default function(){// datalet data = reactive({num1 : 0,num2 : 0,result : 0})// methodsfunction sum(){data.result = data.num1 + data.num2}// 返回一个对象return {data, sum}
}

// App.vue
<template>数字1：<input type="number" v-model="data.num1"><br>数字2：<input type="number" v-model="data.num2"><br>求和结果：{{data.result}}<br><button @click="sum">求和</button>
</template><script>// 这里要导入js文件import sum from './hooks/sum.js'export default {name : 'App',setup(){return sum()}}
</script>return sum()}}
</script>