hook是什么？
搜索到的结果是这么描述的：
vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中。
再简单点的介绍：
将js部分抽离，为了复用，且容易维护
通过一个简单的小功能，我们更好的去认识hook
点击'增加'或者'减少'按钮，改变数字
首先在src文件下创建hook文件夹，再继续创建hook的js文件
创建hook文件
// userComputed.js
import { reactive, ref } from "vue";
export default function () {
const num = ref(0)
const add = () => {
console.log('增加')
num.value++
}
const subtraction = () => {
num.value--
}
return {
num,
add,
subtraction
}
}
这是vue文件
<template>
<div class="navMenu">
<div style="margin-bottom: 100px">我是导航1的子级1</div>
<div class="num">数字：{{ num }}</div>
<div class="btn">
<el-button @click="add">增加</el-button>
<el-button @click="subtraction">减少</el-button>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
import userComputed from "@/hooks/userComputed"; // 引入hook的js文件
const { num, add, subtraction } = userComputed();
</script>
