So verwenden Sie Hooks in vue3

1. Was sind Haken?

Hook bedeutet „Hook“? Tatsächlich handelt es sich bei Hooks tatsächlich um eine Möglichkeit, Funktionen zu schreiben. 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

vue3 hat die Composition API durch Lernen von React Hooks entwickelt, was bedeutet, dass die Composition API auch für Kapselungs-Hooks angepasst werden kann < /code>. #🎜🎜##🎜🎜# Die <code>Hooks in vue3 sind eine Möglichkeit, Funktionen zu schreiben, bei denen der js-Code einer Person hinzugefügt wird Funktionen der Datei Extrahieren Sie sie und fügen Sie sie in eine separate js-Datei oder in einige öffentliche Methoden/Funktionen ein, die wiederverwendet werden können. Tatsächlich ist hooks etwas ähnlich zu mixin in vue2, aber im Vergleich zu mixins, hooks< /code> code> Die Quelle des wiederverwendeten Funktionscodes ist klarer, wodurch er klarer und verständlicher wird. #🎜🎜##🎜🎜# 2. So verwenden Sie Hooks #🎜🎜##🎜🎜#1. Erstellen Sie einen <code>hooks-Ordner in src, um hook zu speichern Datei#🎜🎜##🎜🎜##🎜🎜##🎜🎜#2. Schreiben Sie Hook-Dateien nach Bedarf. Wenn Sie beispielsweise eine Funktion implementieren möchten, die die aktuelle Position der Maus beim Klicken auf die Seite aufzeichnet, können Sie dies in < tun code>hooks Erstellen Sie eine neue Datei useMousePosition.ts im Ordner #🎜🎜#

// 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>

#🎜🎜#3.hook-Dateiverwendung: in Komponenten, die den verwenden müssen Hook-Funktion Zum Beispiel in der test.vue-Datei verwenden: #🎜🎜#rrreee

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Hooks in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!