用vue3實(shí)現(xiàn)一個(gè)鼠標(biāo)追蹤器和異步加載組件

• 一、🖱?鼠標(biāo)追蹤器
• • 1、功能實(shí)現(xiàn)
  • 2、給靜態(tài)頁面綁定功能
• 二、??異步加載組件
• • 1、功能實(shí)現(xiàn)
  • 2、給靜態(tài)頁面綁定功能
  • 3、用泛型改造異步組件功能
• 三、📚結(jié)束語

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

在今天的文章中，將帶領(lǐng)大家初始化一個(gè) vue3 項(xiàng)目，并且用 vue3 實(shí)現(xiàn)一個(gè)鼠標(biāo)追蹤器和異步加載組件。

🎬🎬🎬

一、🖱?鼠標(biāo)追蹤器

1、功能實(shí)現(xiàn)

我們先在 vue3 項(xiàng)目下建立一個(gè) ts 文件，這個(gè) ts 文件用來實(shí)現(xiàn)鼠標(biāo)追蹤器的功能。具體代碼如下：

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

2、給靜態(tài)頁面綁定功能

我們?cè)?vue3 項(xiàng)目下建立一個(gè) .vue 文件，來加載靜態(tài)組件內(nèi)容。具體代碼如下：

<template><div id="app"><h1>鼠標(biāo)追蹤器</h1><h1>X:{{x}},Y:{{y}}</h1></div> </template><script lang="ts"> //引入函數(shù) import useMousePosition from './useMousePosition'export default{name: 'App',setup(){//引用函數(shù)中返回的值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 中的代碼抽離，使得功能實(shí)現(xiàn)變得非常方便。我們通過在組件外部再定義一個(gè) ts 文件，來實(shí)現(xiàn)具體的功能，而不再將具體的功能放在組件內(nèi)部來實(shí)現(xiàn)。

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

二、??異步加載組件

看完鼠標(biāo)追蹤器，我們?cè)賮韺?shí)現(xiàn)一個(gè)異步加載組件。

在我們?nèi)粘５拈_發(fā)中，經(jīng)常需要用到異步加載組件，而異步加載最常見的需求就是加載loading的狀態(tài)。

加載 loading 的狀態(tài)其實(shí)就是當(dāng)我們剛開始加載頁面時(shí)，如果異步請(qǐng)求的內(nèi)容還沒有顯示，那就先顯示一個(gè) loading 效果讓用戶先等等，等到異步請(qǐng)求的內(nèi)容加載出來了，就可以顯示具體的效果。

接下來我們就來實(shí)現(xiàn)這個(gè)功能。

1、功能實(shí)現(xiàn)

我們先在 vue3 項(xiàng)目下建立一個(gè) ts 文件，這個(gè) ts 文件用來實(shí)現(xiàn)加載異步組件的功能。具體代碼如下：

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

實(shí)現(xiàn)完功能以后，接下來我們將給靜態(tài)頁面綁定該異步功能。

2、給靜態(tài)頁面綁定功能

這里先給大家介紹一個(gè)在線免費(fèi)API，網(wǎng)址為https://dog.ceo/dog-api/。這個(gè)API是一個(gè)狗狗API，可以實(shí)時(shí)獲取圖片數(shù)據(jù)。具體使用方式如下：

---

接下來我們?cè)?vue3 項(xiàng)目下建立一個(gè) .vue 文件，來加載靜態(tài)組件內(nèi)容。具體代碼如下：

<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>

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

大家可以看到，當(dāng)我們刷新時(shí)，異步請(qǐng)求的數(shù)據(jù)還沒有加載出來，所以會(huì)先顯示 Loading ，等到數(shù)據(jù)加載出來以后，再顯示具體的數(shù)據(jù)，這就是我們經(jīng)常使用的異步加載組件。

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

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

在上面的這個(gè)例子中，我們已經(jīng)感受到了 Composition API 的擴(kuò)展性和維護(hù)性，但是呢，不滿足于現(xiàn)狀，我們還想要再給它來個(gè)類型的加持，該怎么做呢？

依據(jù)上面的案例，我們繼續(xù)升級(jí)改造。

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

import { ref } from 'vue' import axios from 'axios'//泛型改造 function useURLLoader<T>(url: string){// result的一開始是沒有賦予數(shù)據(jù)類型的，待result賦予數(shù)據(jù)后，再對(duì)其賦予數(shù)據(jù)類型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

這次我們換一個(gè)貓貓的API，來對(duì) .vue 文件進(jìn)行改造。具體代碼如下：

<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>

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

通過代碼我們可以發(fā)現(xiàn)，用泛型來改造組件，會(huì)使得該組件的可擴(kuò)展性更強(qiáng)。 ts 這么好的語言誰能不愛呢對(duì)吧！

三、📚結(jié)束語

到這里，對(duì)于 vue3 開發(fā)鼠標(biāo)追蹤器和異步加載組件的講解就結(jié)束啦！在這篇文章中，我們學(xué)會(huì)了用 vue3 的新特性來實(shí)現(xiàn)鼠標(biāo)追蹤器和異步加載組件，同時(shí)，我們還使用了ts中的泛型和接口，來改造異步加載組件，使其擴(kuò)展性更強(qiáng)。

vue3 持續(xù)學(xué)習(xí)，更新永不停歇……我們下期見！🥂 🥂 🥂

• 關(guān)注公眾號(hào) 星期一研究室 ，第一時(shí)間關(guān)注學(xué)習(xí)干貨，更多精彩專欄待你解鎖~

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。