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

最新推荐文章于 2024-08-18 19:48:01 发布

Beiyux

最新推荐文章于 2024-08-18 19:48:01 发布

阅读量2.1k

点赞数 5

分类专栏： Vue 文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/weixin_45745641/article/details/121302926

版权

本文介绍了一个Vue3结合TypeScript的小案例，展示如何实现鼠标追踪功能。通过创建TS文件并定义函数，展示了如何在Vue组件中调用该功能。文章还探讨了将原始的ref实现替换为reactive，以提高代码的可读性和规范性，并引用了Vue3中ref和reactive的使用和区别。

摘要由CSDN通过智能技术生成

前言

今天教大家写一个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.