vue3.0 hook函数（类似于vue2.x中的mixin）

• hook本质是一个函数，将setup中的Composition API进行了封装
• 类似于vue2.x中的mixin（混入）
• 优势：可以多次复用代码

---

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;
    }

    onMounted(() => {
        window.addEventlistener('click',savePoint);
    })
    onBeforeUnmount(() => {
        window.removeEventlistener('click',savePoint);
    })
    
    // 返回值
    return point 
}

home.vue（引入并使用usePoint.js）

import usePoint from './hook.js'

setup(){
    let point = usePoint();
    return {point}
}