vue3中hooks的概述及用法小結
大家好,今天這篇文章是介紹一下vue3中的hooks以及它的用法。本文內容主要有以下兩點:
- 什么是hooks
- vue3中hooks的使用方法
一、 什么是hooks
hook是鉤子的意思,看到“鉤子”是不是就想到了鉤子函數(shù)?事實上,hooks
還真是函數(shù)的一種寫法。
vue3
借鑒 react hooks
開發(fā)出了 Composition API ,所以也就意味著 Composition API 也能進行自定義封裝 hooks
。
vue3
中的 hooks
就是函數(shù)的一種寫法,就是將文件的一些單獨功能的js
代碼進行抽離出來,放到單獨的js文件中,或者說是一些可以復用的公共方法/功能。其實 hooks
和 vue2
中的 mixin
有點類似,但是相對 mixins
而言, hooks
更清楚復用功能代碼的來源, 更清晰易懂。
二、hooks的用法
1.在src
中創(chuàng)建一個hooks
文件夾,用來存放hook
文件
2.根據(jù)需要寫hook文件,比如要實現(xiàn)一個功能就是在 點擊頁面時,記錄鼠標當前的位置,可以在hooks
文件夾中新建一個文件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>
以上就是vue3中hooks的使用,是不是覺得特別的簡單清晰。
到此這篇關于vue3中hooks的介紹及用法的文章就介紹到這了,更多相關vue3中hooks用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue創(chuàng)建淺層響應式數(shù)據(jù)的實例詳解
這篇文章主要介紹了Vue創(chuàng)建淺層響應式數(shù)據(jù)的實例,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11