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
更清楚复用功能代码的来源, 更清晰易懂。
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 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> 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 'vue' // 引入hooks import useMousePosition from '../../hooks/useMousePosition' export default defineComponent({ setup () { // 使用hooks功能 const { x, y } = useMousePosition() return { x, y } } }) </script>
hook
, comme dans le fichier test.vue : 🎜rrreeeCe 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!