Comment utiliser les hooks dans vue3

1. Que sont les crochets

hook signifie crochet Quand vous voyez « crochet », pensez-vous à la fonction crochet ? En fait, les hooks sont en réalité une façon d'écrire des fonctions. 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 a développé l'API Composition en apprenant des react hooks, cela signifie donc que l'API Composition peut également être personnalisée pour encapsuler des hooks. 🎜🎜hooks dans vue3 est une façon d'écrire des fonctions, qui consiste à extraire le code js de certaines fonctions individuelles du fichier et à le mettre dans un fichier js séparé ou dans certaines méthodes/fonctions publiques réutilisables. En fait, hooks est quelque peu similaire à mixin dans vue2, mais comparé aux mixins, hooks code> La source du code de fonction réutilisé est plus claire, ce qui la rend plus claire et plus facile à comprendre. 🎜🎜2. Utilisation des hooks🎜🎜1. Créez un dossier <code>hooks dans src pour stocker les fichiers hook🎜🎜🎜🎜2. Écrivez les fichiers de hook selon vos besoins, par exemple pour implémenter un fonction qui enregistre la position actuelle de la souris lorsque vous cliquez sur la page, vous pouvez créer un nouveau fichier useMousePosition.ts dans le dossier hooks, 🎜

// 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 Utilisation : à utiliser dans les composants qui doivent utiliser la fonction hook, comme dans le fichier test.vue : 🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!