vue3.0 模块化简介

在vue3.0中使功能模块化

使用建议

• 在src目录中新建hooks文件夹，用于存放模块化功能

例如，要实现在很多的模板中都需要使用鼠标的位置信息，可以在hooks 文件夹中单独创建一个ts文件，写入如下代码

// 导入需要的函数
import {
    reactive, toRefs, onMounted, onUnmounted} from 'vue'
// 创建函数
function useMousePosition() {
    // 创建reactive对象，也可以使用ref方法const positionData = reactive({
    x: 0,y: 0,updatePosition: (e: MouseEvent) => {
    positionData.x = e.pageXpositionData.y = e.pageY      }})// 导出前一定要转换成ref对象，否则无法响应变化const refPositionData = toRefs(positionData)onMounted(() => {
    // 在组件挂载后 给doc添加监听器document.addEventListener('click', positionData.updatePosition)  })onUnmounted(() => {
    document.removeEventListener('click', positionData.updatePosition)})const x = refPositionData.xconst y = refPositionData.yreturn {
    // 可以直接返回ref对象// ...refPositionDatax,y}
}
// 不要忘记导出函数
export default useMousePosition

这个模块就是单独存在的，那个模板中需要，就可以像调用函数一样直接 import后使用

import useMousePosition from './src/hooks/useMousePosition'
...
// 可以自定义函数名，使语义更加清楚
const {
    x, y} = useMousePosition()
...