Vue3+Ts小案例-实现追踪鼠标（reactive改写）

前言

今天教大家写一个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是不是使代码整体看起来可读性规范性更高呢？