vue3でフックを使う方法

1. フックとは

フックとはフックの意味ですが、「フック」と聞くとフック機能を思い浮かべますか？実際、hooks は実際には関数を記述する方法です。

vue3 コンポジション API は react フック に基づいて開発されたため、コンポジション API をカプセル化 フック 用にカスタマイズすることもできることを意味します。

vue3 の hooks は関数を記述する方法であり、ファイルのいくつかの個々の関数の js コードを抽出します。それを別の js ファイル、または再利用できるいくつかのパブリック メソッド/関数に含めます。実際、hooks は vue2 の mixin に似ていますが、mixins と比較すると、hooks の方がより優れています。 clear 関数コードのソースを使用して、関数コードをより明確かつ理解しやすくします。

2. フックの使用法

1. hook ファイルを保存するために、src に hooks

フォルダーを作成します。

2. 必要に応じてフック ファイルを記述します。たとえば、ページをクリックしたときにマウスの現在位置を記録する関数を実装したい場合は、次のようにします。 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でフックを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。