Vue3 Hooks函数使用及封装

目录

1. 什么是hooks函数？

将单独功能的js代码抽离出来， 加工成公共函数，从而达到逻辑复用。

有了composition API 意味着我们就可以自定义封装hooks，最终的目的都是进行复用，在Vue2中复用的方式大部分都是采取的mixin，但相比hooks,hooks更清楚复用的功能来源及功能。

2.封装一个hooks函数

hooks封装规范：

  1. 新建hooks文件；

  2. 新建文件名前缀加上use+上文件里内容的简意；

  3. 合理利用Vue提供的响应式函数及生命周期；

  4. 暴露出 变量 和 方法 提供外部需要时使用；

如： src/hooks/useSum.ts
意思就是创建一个数据内容的hooks文件

不带参数的hooks的封装

import { ref } from 'vue'
export default function () {
    // 数据
    const addSum = ref(0)
    // 方法
    function sum() {
        addSum.value +=  1
    }
    // 向外部提供 东西
    return {
        sum,
        addSum
    }
}

vue文件引入hooks文件

<template>
    <div class="app">
        <el-button type="success" @click="sum">求和</el-button>
        <span>加法等于:{{ addSum }}</span>
    </div>
</template>
   
<script lang="ts" setup>
import { ref } from 'vue'
import useSum from '@/hooks/useSum'
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { sum, addSum } = useSum()
</script>
   
<style lang="scss" scoped></style>

实现

带参数的hooks的封装

ts文件

import { Ref, ref } from 'vue';
const useAdd = (num1: Ref<number>, num2: Ref<number> ) => {
    const addNum = ref(0)
    const addFn = (num1: number, num2: number) => {
        addNum.value = num1 + num2
    }
    return {
        addNum,
        addFn
    }
}
export default useAdd

vue文件

<template>
    <div class="app">
        <el-button type="success" @click="addFn(num1, num2)">求和</el-button>
        <span>加法等于:{{ addNum }}</span>
    </div>
</template>
   
<script lang="ts" setup>
import { ref } from 'vue'
import  useAdd  from '../../hooks/map'
const num1 = ref(2)
const num2 = ref(1)
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd(num1, num2)
</script>
   
<style lang="scss" scoped></style>