Vue3---基础9（自定义Hooks）

Hooks

        概念：

        vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

        创建方法：

        在 src 目录下新建一个 hooks 文件夹，用于存放hook文件

        把需要抽离出来的代码，放入hook文件内，文件夹名为 useXxx.js/useXxx.ts

        例如 useUser，就是把有关用户的代码抽离到了useUser内

        使用方法：

        在需要用到hook文件的组件内，先引入hook，

        然后结构赋值需要用到的数据和方法

        最后直接调用该数据和方法就可以了

        示例代码：

        vue文件

<template>
    <div class="person">
        <h2>当前求和值为：{{ sum }}</h2>
        <button @click="add">点我+1</button>
        <hr>
        <img v-for="(item,index) in dogList" :src="item" :key="index">
        <br>
        <button @click="hChangeDog">切换小狗</button>
    </div>
</template> 

<script lang="ts" setup name="text2">
   import useSum from '@/hooks/useSum.ts'
   import useDog from '@/hooks/useDog.ts'

    // const abc = useSum
    // console.log('abc',abc);
    const { sum, add } = useSum
    const { dogList, hChangeDog } = useDog
    
</script>

        hook下的useSum.ts 文件

        

import { ref } from "vue"
import axios from 'axios'

export default function() {
    // 数据
    let sum = ref(0)

    // 方法
    function add() {
        sum.value += 1
    }

    return { sum, add }
}

        注意点

        在写hook文件时，需要使用函数导出需要使用的数据或方法，在最后使用return去返回

        在组件内要使用hook时，要先导入，再用常量去接收