Vue3+Ts练习小案例——实现追踪鼠标的

前言

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