您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue3中的hooks如何使用”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue3中的hooks如何使用”吧!
hook是鉤子的意思,看到“鉤子”是不是就想到了鉤子函數(shù)?事實(shí)上,hooks
還真是函數(shù)的一種寫(xiě)法。
vue3
借鑒 react hooks
開(kāi)發(fā)出了 Composition API ,所以也就意味著 Composition API 也能進(jìn)行自定義封裝 hooks
。
vue3
中的 hooks
就是函數(shù)的一種寫(xiě)法,就是將文件的一些單獨(dú)功能的js
代碼進(jìn)行抽離出來(lái),放到單獨(dú)的js文件中,或者說(shuō)是一些可以復(fù)用的公共方法/功能。其實(shí) hooks
和 vue2
中的 mixin
有點(diǎn)類(lèi)似,但是相對(duì) mixins
而言, hooks
更清楚復(fù)用功能代碼的來(lái)源, 更清晰易懂。
1.在src
中創(chuàng)建一個(gè)hooks
文件夾,用來(lái)存放hook
文件
2.根據(jù)需要寫(xiě)hook文件,比如要實(shí)現(xiàn)一個(gè)功能就是在 點(diǎn)擊頁(yè)面時(shí),記錄鼠標(biāo)當(dāng)前的位置,可以在hooks
文件夾中新建一個(gè)文件useMousePosition.ts
,
// src/hooks/useMousePosition.ts import { ref, onMounted, onUnmounted, Ref } from 'vue' interface MousePosition { x: Ref<number>, y: Ref<number> } function useMousePosition(): MousePosition { 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
3.hook文件的使用:在需要用到該hook
功能的組件中的使用,比如在 test.vue文件中:
// src/views/test.vue <template> <div> <p>X: {{ x }}</p> <p>Y: {{ y }}</p> </div> </template> <script lang="ts"> import { defineComponent} from 'vue' // 引入hooks import useMousePosition from '../../hooks/useMousePosition' export default defineComponent({ setup () { // 使用hooks功能 const { x, y } = useMousePosition() return { x, y } } }) </script>
到此,相信大家對(duì)“vue3中的hooks如何使用”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。