Vue3学习记录（三）

【Vue3】自定义Hooks

1.为什么要使用Hooks

为了更好的对一些通用的模块进行复用，可以使用Hooks的方式对代码进行封装，将一系列相关代码和逻辑封装在一个Hooks内。需要用到的组件可以通过 import 的形式导入使用，对于代码的可读性会有一定的提升。

2.如何封装Hooks

// 文件名一般可以按照你的喜好自己决定，但是有一般来说创建Hooks的名称都是使用useXXX来写，属于是一些规范，但不是必要的。
// 假设创建文件：useTest.ts

import { ref, reactive } from 'vue'
// 对外导出一个函数
export default function() {
  // 可以封装一些数据
  const dataList = reactive([...])
  
  const num = ref(0)
  
  // 也可以封装一些函数
  function add() {
    num.value++
  }
  
  ....
  
  // 最后要把这些变量，方法全部返回出去
  return {
    dataList,
    num,
    add
  }
}

在你要使用这个hooks的文件中可以这么使用：

<script lang='ts' setup name='Test'>
// 引入hooks
import useTest from '@/hooks/useTest' // 这个路径就是hooks的存储路径

const { dataList, num, add } = useTest() // 如此就可以使用hooks中的数据和方法了

</script>