前言
今天教大家写一个vue3+ts 的小案例，鼠标追踪
先来看下面的效果展示：
鼠标在屏幕上任意点击，会展示鼠标点击点的x和y坐标值，下面来看一下如何实现实现过程
新建一个ts文件，然后开始写这个函数的内容：
TS：
import { ref, onMounted, onUnmounted } from 'vue'
function useMousePosition() {
const x = ref(0)
const y = ref(0)
const updateMouse = (e: MouseEvent) => {
x.value = e.pageX
y.value = e.pageY
}
onMounted(() => {
document.addEventListener('click', updateMouse)
})
onUnmounted(() => {
document.removeEventListener('click', updateMouse)
})
return {x, y}
}
export default useMousePosition导入 ref ，onMounted, onUnmounted
定义函数及变量
获取到鼠标点击的坐标
返回 x 和 y
再来看Vue的页面：
Vue：
<template>
<div id="app">
<h1>X: {{x}}, Y: {{y}}</h1>
</div>
</template>
<script lang="ts">
import { ref, computed, reactive, toRefs, watch, onErrorCaptured } from 'vue'
import useMousePostion from './hooks/useMousePosition'
export default {
name: 'App',
setup() {
const { x, y } = useMousePosition()
return {
x,
y
}
}
};
</script>直接调用ts页面写好的函数就能够实现啦
reactive重写Ts
可以看到在上面的ts文件中， const x = ref(0) const y = ref(0)都是使用单个的ref形式，我们在了解reactive之后就可以来进行重写，关于ref和reactive用法，可以参考博客 Vue3中ref和reactive的使用方法及区别
reactive重写之后的Ts代码：
import { ref, onMounted, onUnmounted, reactive, toRefs} from 'vue'
interface DataPros {
x: number,
y: number
}
function useMousePosition() {
const data: DataPros = reactive({
x: 0,
y: 0
})
const updateMouse = (e: MouseEvent) => {
data.x = e.pageX
data.y = e.pageY
}
onMounted(() => {
document.addEventListener('click', updateMouse)
console.log(refData1)
})
onUnmounted(() => {
document.addEventListener('click', updateMouse)
console.log(refData1)
})
const refData1 = toRefs(data)
return { refData1 }
}
export default useMousePosition先定义一个interface规范变量的形式，然后定义一个data存放x和y，因为reactive接收一个obj返回时会丧失响应性，所以我们这里利用toRefs来进行转换，保留响应性。
怎么样，使用reactive是不是使代码整体看起来可读性规范性更高呢？
