使用Vue3的组合API封装的可复用的功能函数
自定义hook的作用类似于vue2中的mixin技术
自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂7
首先在src文件夹下定义一个hooks文件夹，在文件夹下创建一个index.js文件，然后在文件中写下以下代码
import { ref, onMounted, onUnmounted } from 'vue' /* 收集用户鼠标点击的页面坐标 */ export default function useMousePosition () { // 初始化坐标数据 const x = ref(-1) const y = ref(-1) // 用于收集点击事件坐标的函数 const updatePosition = (e: MouseEvent) => { x.value = e.pageX y.value = e.pageY } // 挂载后绑定点击监听 onMounted(() => { document.addEventListener('click', updatePosition) }) // 卸载前解绑点击监听 onUnmounted(() => { document.removeEventListener('click', updatePosition) }) return {x, y} }
然后再在某个使用到index.js功能的组件引入js文件，例如：
<template> <div> <h2>x: {{x}}, y: {{y}}</h2> </div> </template> <script> import { ref } from "vue" /* 在组件中引入并使用自定义hook 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 */ import useMousePosition from './hooks/useMousePosition' export default { setup() { const {x, y} = useMousePosition() return { x, y } } } </script>
