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
🎜🎜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!