vue3知识点：自定义hook函数

@[toc]

二、常用 Composition API

问题：啥叫“组合式API”？

答案：请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

9.自定义hook函数

<font color='red'>注意点1：</font>
创建hooks文件夹，把每个模块需要封装的代码封装到一个js文件中，这样的好处是组件中看着很清爽，只管引入和调用即可，具体hook如何实现那是别人负责的，当前组件只管引入使用即可。

<font color='red'>使用步骤：</font>
<font color='red'>1）</font>封装每个模块的hook函数的js文件
<font color='red'>2）</font>组件中import引入hook函数
<font color='red'>3）</font>return中进行返回设置
<font color='red'>4）</font>页面模板中直接引用即可

案例：页面打印鼠标滑动坐标

项目代码

项目目录

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

App.vue

<template>
    <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
    <Demo v-if="isShowDemo"/>
</template>

<script>
    import {ref} from 'vue'
    import Demo from './components/Demo'
    export default {
        name: 'App',
        components:{Demo},
        setup() {
            let isShowDemo = ref(true)
            return {isShowDemo}
        }
    }
</script>

usePoint.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
    //实现鼠标“打点”相关的数据
    let point = reactive({
        x:0,
        y:0
    })

    //实现鼠标“打点”相关的方法
    function savePoint(event){
        point.x = event.pageX
        point.y = event.pageY
        console.log(event.pageX,event.pageY)
    }

    //实现鼠标“打点”相关的生命周期钩子
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })

    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })

    return point
}

Demo.vue

<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr>
    <h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
    import {ref} from 'vue'
    import usePoint from '../hooks/usePoint'
    export default {
        name: 'Demo',
        setup(){
            //数据
            let sum = ref(0)
            let point = usePoint()
            

            //返回一个对象（常用）
            return {sum,point}
        }
    }
</script>

结果展示

本人其他相关文章链接

1.《vue3第二章》常用组合式 Composition API，包括setup、ref函数、reactive函数、vue3.0中的响应式原理、计算属性与监听属性
2.vue3知识点：setup
3.vue3知识点：ref函数
4.vue3知识点：reactive函数
5.vue3知识点：Vue3.0中的响应式原理和 vue2.x的响应式
6.vue3知识点：reactive对比ref
7.vue3知识点：计算属性与监视属性
8.vue3知识点：生命周期
9.vue3知识点：自定义hook函数
10.vue3知识点：toRef函数和toRefs函数