Vue3 学习笔记 —— 自定义 hook

• 目的：点击页面，获取鼠标位置
• 目录结构
  
• Child.vue

<template>
x: {{x}}
y: {{y}}
</template>

<script lang="ts">

import { defineComponent} from 'vue';
import useMousePosition from '../hooks/useMousePosition'

export default defineComponent({
  name: 'Child',

  setup() {
    
    return useMousePosition()
  }

});
</script>

• useMousePosition.ts

import {ref, onMounted, onBeforeUnmount} from 'vue'

export default function useMousePosition () {
    const x = ref(-1)
    const y = ref(-1)
    const handler = (event: MouseEvent)=>{
        x.value = event.pageX
        y.value = event.pageY
    }
    onMounted(()=>{
        window.addEventListener('click', handler)
    })

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

    return {
        x,
        y
    }
}

• 运行截图：