（五）vue3模块化 -鼠标追踪器——模块拆分案例

@

目录

• 通过模块拆分的形式来完成这个案例
• 点击获取鼠标当前的位置
• 抽取单独功能 进行复用
• 使用Reactive的形式 注意他接收的一个object的形式 暴露的是时候有的需要 toRef

通过模块拆分的形式来完成这个案例

我觉得目的是什么呢？就是你想 你之前在Vue2中时候创建一个组件的带响应的，只能去创建一个组件，才能完成相应的调用
但是vue3的新特性可以完成这个只需要使用那一块代码的形式就能完成你的这个作用

点击获取鼠标当前的位置

在.vue文件里面

<template>
  <div id="app">
  	<h1> X: {{ X }} </h1>
  	<h1> Y: {{ Y }} </h1>
  </div>
</template>
<scrpit>
import {ref,onMounted,onMounted} from 'vue'
	export default{
		name:'app',
		setup(){
			count X = ref(0);
			count Y = ref(0);
			声明点击对象的回调方法  同时可以声明事件对象是鼠标的事件对象
			const updateMouse = (e:MouseEvent)=>{
				X.value = e.pageX;
				Y.value = e.pageY
			}
			添加点击时间 在生命周期 onMounted onUnmounted 中进行使用
			onMounted(()=>{
				document.addEventListener('click',updateMouse )	
			})
			onUnmounted (()=>{
				document.removeEventListener('click',updateMouse )	
			})

			导出最后产生的 X Y
			return{
				X , Y
			} 
		}
	
	}
</script>

抽取单独功能 进行复用

src下边 新建hooks文件夹 ， 再新建文件 useMousePosition.ts

import {ref,onMounted,onMounted} from 'vue'
function useMousePosition (){
	count X = ref(0);
	count Y = ref(0);
	声明点击对象的回调方法  同时可以声明事件对象是鼠标的事件对象
	const updateMouse = (e:MouseEvent)=>{
		X.value = e.pageX;
		Y.value = e.pageY
	}
	添加点击时间 在生命周期 onMounted onUnmounted 中进行使用
	onMounted(()=>{
		document.addEventListener('click',updateMouse )	
	})
	onUnmounted (()=>{
		document.removeEventListener('click',updateMouse )	
	})

	导出最后产生的 X Y
	return{
		X , Y
	} 
}
export default useMousePosition

使用：

import useMousePosition from './hooks/useMousePosition'

在setup中
setup(){
	const {X,Y} = useMousePosition()
	return{ X ,Y }
}

使用Reactive的形式 注意他接收的一个object的形式 暴露的是时候有的需要 toRef

import {reactive,onMounted,onMounted} from 'vue'
function useMousePosition (){
	const mouseEve = reactive({
		count X = 0;
		count Y = 0;
	})
	声明点击对象的回调方法  同时可以声明事件对象是鼠标的事件对象
	const updateMouse = (e:MouseEvent)=>{
		X.value = e.pageX;
		Y.value = e.pageY
	}
	添加点击时间 在生命周期 onMounted onUnmounted 中进行使用
	onMounted(()=>{
		document.addEventListener('click',updateMouse )	
	})
	onUnmounted (()=>{
		document.removeEventListener('click',updateMouse )	
	})

	导出最后产生的 X Y
	return{
		...toRefs(mouseEve)
	} 
}
export default useMousePosition