vue3:一个小例子了解hook是什么（提升效率的hook）

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>