vuejs 从入门到精通——Vue3技术_自定义hook ！！！

 首先我们要搞清楚什么是hook函数？

自定义hook函数

• 什么是hook?本质是一个函数，把setup函数中使用的Composition API进行了封装
• 类似于vue2.x中的mixin
• 自定义hook的优势:复用代码让setup中的逻辑更清楚易懂

 那么Composition API 是什么？

只要在setUp 里面写的都是组合式API。比如：ref、reactive、生命周期等。

 借助一个功能点  来体验下hook到底是怎么封装的？

示例目录如下：

 Demo文件代码示例：

template代码：

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

js代码：

 import {ref}  from 'vue';
//引入钩子函数
 import  usePoint from '../hooks/usePoint'
    export default {
        name: 'Dmeo',
        setup(){
            //数据
            let sum = ref(0)
            let point  = usePoint()
            //返回一个对象（常用）
            return {sum,point}
        }
    }

hooks文件代码示例：

import  {reactive,onMounted,onBeforeUnmount} from 'vue';
export function(){
    //实现鼠标“打点”相关的数据
let point = reactive({
    x:0,
    y:0
})
//实现鼠标“打点”相关的方法
function usePoint(event){
    point.x = event.pageX
    point.y = event.pageY
}
//实现鼠标“打点”相关的生命周期钩子
onMounted(()=>{
window.addEventListener ('click',usePoint)
})
onBeforeUnmount(()=>{
    window.removeEventListener ('click',usePoint)
    })
//暴露数据
    return  point
}

运行效果 如图展示：