vue3.2如何将写hooks呢？

场景

有些时候，我们需要将一个页面拆分成各个模块。
这些模块包含增加，删除，修改，等
并且这些模块会处理非常复杂的业务逻辑问题
所以，我们最好是将他们分开。

如何将分离新增模块拆离出去

主页面

<template>
    <div>
        <el-button @click="addHanlder">新增</el-button>
        <ul>
            <li v-for="item in listArr" :key="item.id"> {{ item.name }} </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import {  ref} from 'vue'
// 导入新增模块的业务逻辑，注意不能够写成add.ts
import addHooks from './add'
// 定义接口
interface listType{
    name?:string,
    age ?:number,
    id:string,
    // 可以有任意多个字段-任意类型
    [propN:string]:any,
}
let listArr=ref<listType[]>([
    {name:'张三',age:21,id:'001'},
    {name:'李四',age:20,id:'002'},
    {name:'周六',age:28,id:'004',aa:'xx'},
])
// 使用新增模块
let { addHanlder }=addHooks(listArr.value);
</script>

add.ts文件

// 新增功能的逻辑
// 注意这里需要说明listArr的参数类型哈 { name?: string; age?: number; id: string }[]
function addHooks(listArr: { name?: string; age?: number; id: string }[]) { 
    function addHanlder() { 
        listArr.push(
            {name:'王五',age:24,id:'005'}
        )
    }
    return {
        addHanlder
    }
}
export default  addHooks

hooks的详细讲解

所有的hook都是放在hooks这个文件夹下的。
hook命名规范：use + 名称==》组成方法
如：useStudent,useOrder,useCart
hooks就是一个xx.ts/xx.js文件,里面的内容就是一个可以调用的函数。
hooks里面是可以写生命周期函数，计算属性，以及其他。
hooks中的函数有向外暴露各种数据和方法。
在使用页面引入hooks，通过解构，然后调用里面的方法。

总结
hooks(function) = 响应式数据 + 更改响应式数据的方法 +生命周期函数 + 计算属性 + 其他
hooks会向外暴露页面需要使用的数据和方法。

hooks的尝试

// src\hooks\useDog.ts

import { onMounted, ref } from "vue";
// 可以是一个匿名函数
export default function () {
  // 响应式数据，页面需要使用到，等会暴露出去
  let dogUrl =ref();
  // 更改响应式数据的方法
  function getDogAddressApi() {
   fetch("https://dog.ceo/api/breed/pembroke/images/random")
     .then((res) => {
      return res.json();
     })
     .then((res) => {
      console.log(res);
       dogUrl.value = res.message;
     });
  }
  // hooks里面是可以写生命周期函数，计算属性，以及其他。
  onMounted(()=>{
    getDogAddressApi()
  })
  // 页面中显示图片的变量是dogUrl，暴露出去。
  // 获取图片的方法：getDogAddressAPi
  return { dogUrl, getDogAddressApi}
}

// 使用的页面
<template>
  <div>
    <h1>hooks的使用</h1>
    <img :src="dogUrl" alt="">
    <button @click="freshHandler">刷新</button>
  </div>
</template>
<script lang="ts" setup>
// 引入hooks
import useDog from '@/hooks/useDog'
// 解构后直接使用
let {dogUrl, getDogAddressApi} = useDog()

function freshHandler(){
  getDogAddressApi()
} 
</script>

export default导出时的注意点

// 可以是一个匿名函数
export default function () { }

这种是默认导出，一个文件中只能使用一次默认导出。
在页面引入的时候，可以使用任意变量来接收
import useDog(这里可以是bb,ccc) from '路径'。
有的小伙伴可能在想，如果我写的不是一个匿名函数，而是一个具体的函数。
在页面引入使用的时候，代码是否会发生变化。
回答：不会。
因为：我们是使用export default暴露的。
在页面引入时的时候 useDog 就是那个暴露的函数。
也就是说：此时useDog就是那个暴露的函数，不关心暴露函数的名称。
通过代码说明

// 现在不是匿名函数了，而是一个具名函数
export default function CXDog() {

}

// 使用页面，代码是不会发生变化的。
// 因为：export default暴露的，useDog就是那个暴露的函数
import useDog from '@/hooks/useDog'
let {dogUrl, getDogAddressApi} = useDog()
function freshHandler(){
  getDogAddressApi()
} 

匿名函数

匿名函数在定义时没有指定函数名，例如：function () { ... }

正是因为有hooks，组合式的写法才有了意义。

正是因为有hooks，组合式的写法才有了意义。
要不然你所有的代码放setup在一大堆，这样的话很乱，还不如vue2呢？
你现在是否明白？hooks的意义。
因此：我们在写代码的时候，时候可以写成hooks。