hook是鉤子的意思，看到「鉤子」是不是就想到鉤子函數了？事實上，hooks 還真是函數的一種寫法。
vue3 借鏡 react hooks 開發了 Composition API ，所以也就代表 Composition API 也能進行自訂封裝 hooks。
vue3 中的hooks 是函數的一種寫法，就是將檔案的一些單獨功能的js程式碼進行抽離出來，放到單獨的js檔案中，或者說是一些可以重複使用的公共方法/功能。其實hooks 和vue2 中的mixin 有點類似，但是相對mixins 而言， hooks 更清楚復用功能代碼的來源, 更清晰易懂。
1.在src中建立一個hooks資料夾，用來存放hook文件
2.根據需要寫hook文件，例如實現一個功能就是在點擊頁面時，記錄滑鼠目前的位置，可以在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 useMousePosition3.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如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
