Vue3 hook 函数模块化 类似vue2 mixin

1、优点

代码功能模块化，复用代码

2、建立

新建hooks文件夹，在src下

src/hooks/use功能.js

3、案例

a、模块化

src/hooks/usepoint.js

import { reactive, onMounted, onBeforeUnmount} from 'vue';
 export default function(){
    let ponint = reactive({
        x: 0,
        y: 0
    })

    function getPoint(event){
            ponint.x = event.clientX
            ponint.y = event.clientY
            console.log(ponint.x, ponint.y)
    }
    // 挂载该组件时，增加监听
    onMounted(() => {
        document.addEventListener('click',  getPoint)
    })
    // 卸载该组件是，关闭监听
    onBeforeUnmount(() => {
        document.removeEventListener('click', getPoint)
    })

    return ponint
        
}

// export default getPonit

b、使用

// 引入
import getPoint from '../hooks/usepoint'
//使用
let point = getPoint()