vue3中的hooks如何使用

一、 什麼是hooks

hook是鉤子的意思，看到「鉤子」是不是就想到鉤子函數了？事實上，hooks 還真是函數的一種寫法。

vue3 借鏡 react hooks 開發了 Composition API ，所以也就代表 Composition API 也能進行自訂封裝 hooks。

vue3 中的hooks 是函數的一種寫法，就是將檔案的一些單獨功能的js程式碼進行抽離出來，放到單獨的js檔案中，或者說是一些可以重複使用的公共方法/功能。其實hooks 和vue2 中的mixin 有點類似，但是相對mixins 而言， hooks 更清楚復用功能代碼的來源, 更清晰易懂。

二、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(&#39;click&#39;, updateMouse)
  })

  onUnmounted(() => {
    document.removeEventListener(&#39;click&#39;, 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 &#39;vue&#39;
// 引入hooks
import useMousePosition from &#39;../../hooks/useMousePosition&#39;
export default defineComponent({
  setup () {
    // 使用hooks功能
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
})
</script>

以上是vue3中的hooks如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！