用vue3實現一個鼠標追蹤器和異步加載組件

• 一、🖱?鼠標追蹤器
• • 1、功能實現
  • 2、給靜態頁面綁定功能
• 二、??異步加載組件
• • 1、功能實現
  • 2、給靜態頁面綁定功能
  • 3、用泛型改造異步組件功能
• 三、📚結束語

周一最近學完 vue3 新特性，就想著用 vue3 來搗鼓點新的小工具。突然想到以前自己遇到的一個問題，想要獲取當前鼠標點擊的位置，但是以前是直接用原生 js 寫的，體驗感就沒有那么好了，于是乎，今天就用 vue3 來開始我的小工具之旅啦！

在今天的文章中，將帶領大家初始化一個 vue3 項目，并且用 vue3 實現一個鼠標追蹤器和異步加載組件。

🎬🎬🎬

一、🖱?鼠標追蹤器

1、功能實現

我們先在 vue3 項目下建立一個 ts 文件，這個 ts 文件用來實現鼠標追蹤器的功能。具體代碼如下：

//引入需要使用的Composition API import { ref, onMounted, onUnmounted } from 'vue' //實現鼠標追蹤器功能 function useMousePosition(){//初始化x軸和y軸的值const x = ref(0)const y = ref(0)//獲取鼠標點擊后x軸和y軸的值const updateMouse = (e: MouseEvent) => {x.value = e.pageXy.value = e.pageY}//鼠標點擊時執行updateMouse函數onMounted(() => {document.addEventListener('click', updateMouse)})//鼠標點擊結束后對當前點擊事件執行銷毀操作onUnmounted(() => {document.removeEventListener('click', updateMouse)})//返回x和y的值return {x, y} }//導出函數 export default useMousePosition

2、給靜態頁面綁定功能

我們在 vue3 項目下建立一個 .vue 文件，來加載靜態組件內容。具體代碼如下：

<template><div id="app"><h1>鼠標追蹤器</h1><h1>X:{{x}},Y:{{y}}</h1></div> </template><script lang="ts"> //引入函數 import useMousePosition from './useMousePosition'export default{name: 'App',setup(){//引用函數中返回的值const { x, y } = useMousePosition()//返回值return{x,y}} }; </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

最終我們來看下顯示效果：

看完效果，我們來分析下代碼。大家可以看到， vue3 中的代碼抽離，使得功能實現變得非常方便。我們通過在組件外部再定義一個 ts 文件，來實現具體的功能，而不再將具體的功能放在組件內部來實現。

這樣從某種層面上來講，代碼的可擴展性和可維護性都靈活了許多。

二、??異步加載組件

看完鼠標追蹤器，我們再來實現一個異步加載組件。

在我們日常的開發中，經常需要用到異步加載組件，而異步加載最常見的需求就是加載loading的狀態。

加載 loading 的狀態其實就是當我們剛開始加載頁面時，如果異步請求的內容還沒有顯示，那就先顯示一個 loading 效果讓用戶先等等，等到異步請求的內容加載出來了，就可以顯示具體的效果。

接下來我們就來實現這個功能。

1、功能實現

我們先在 vue3 項目下建立一個 ts 文件，這個 ts 文件用來實現加載異步組件的功能。具體代碼如下：

import { ref } from 'vue' import axios from 'axios'function useURLLoader(url: string){const result = ref(null)const loading = ref(true)const loaded = ref(false)const error = ref(null)axios.get(url).then((rawData) => {loading.value = falseloaded.value = trueresult.value = rawData.data}).catch(e => {error.value = eloading.value = false})return{result,loading,loaded,error} }export default useURLLoader

實現完功能以后，接下來我們將給靜態頁面綁定該異步功能。

2、給靜態頁面綁定功能

這里先給大家介紹一個在線免費API，網址為https://dog.ceo/dog-api/。這個API是一個狗狗API，可以實時獲取圖片數據。具體使用方式如下：

---

接下來我們在 vue3 項目下建立一個 .vue 文件，來加載靜態組件內容。具體代碼如下：

<template><div id="app"><h1>異步加載組件</h1><button v-if="loading">Loading……</button><img v-if="loaded" :src="result.message"></div> </template><script lang="ts"> import useURLLoader from './useUrlLoader'export default{name: 'App',setup(){const { result, loading, loaded, error } = useURLLoader('https://dog.ceo/api/breeds/image/random')return{result,loading,loaded,error}} }; </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

最終我們來看下顯示效果：

大家可以看到，當我們刷新時，異步請求的數據還沒有加載出來，所以會先顯示 Loading ，等到數據加載出來以后，再顯示具體的數據，這就是我們經常使用的異步加載組件。

3、用泛型改造異步組件功能

大家都知道， vue2 對于 typescript 的支持是非常有限的，因此， vue3 的改造升級后對 ts 有了極大的加持。

在上面的這個例子中，我們已經感受到了 Composition API 的擴展性和維護性，但是呢，不滿足于現狀，我們還想要再給它來個類型的加持，該怎么做呢？

依據上面的案例，我們繼續升級改造。

首先，我們希望 result 可以通過泛型來推斷出類型，所以，我們將 ts文件的代碼進行以下改造。代碼如下：

import { ref } from 'vue' import axios from 'axios'//泛型改造 function useURLLoader<T>(url: string){// result的一開始是沒有賦予數據類型的，待result賦予數據后，再對其賦予數據類型const result = ref<T | null>(null)const loading = ref(true)const loaded = ref(false)const error = ref(null)axios.get(url).then((rawData) => {loading.value = falseloaded.value = trueresult.value = rawData.data}).catch(e => {error.value = eloading.value = false})return{result,loading,loaded,error} }export default useURLLoader

這次我們換一個貓貓的API，來對 .vue 文件進行改造。具體代碼如下：

<template><div id="app"><h1>異步加載組件</h1><button v-if="loading">Loading……</button><img v-if="loaded" :src="result[0].url"></div> </template><script lang="ts"> import { watch } from 'vue' import useURLLoader from './useUrlLoader'interface CatResult{id: string;url: string;width: string;height: string; }export default{name: 'App',setup(){const { result, loading, loaded, error } = useURLLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search?limit=1')watch(result, () => {if(result.value){console.log('value', result.value[0].url)}}) return{result,loading,loaded,error}} }; </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

最終瀏覽器的顯示效果如下：

通過代碼我們可以發現，用泛型來改造組件，會使得該組件的可擴展性更強。 ts 這么好的語言誰能不愛呢對吧！

三、📚結束語

到這里，對于 vue3 開發鼠標追蹤器和異步加載組件的講解就結束啦！在這篇文章中，我們學會了用 vue3 的新特性來實現鼠標追蹤器和異步加載組件，同時，我們還使用了ts中的泛型和接口，來改造異步加載組件，使其擴展性更強。

vue3 持續學習，更新永不停歇……我們下期見！🥂 🥂 🥂

• 關注公眾號 星期一研究室 ，第一時間關注學習干貨，更多精彩專欄待你解鎖~

• 如果這篇文章對你有用，記得一鍵三連再走哦~

總結

以上是生活随笔為你收集整理的模块化妙用！用vue3实现一个鼠标追踪器和异步加载组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。