vue3에서 후크를 사용하는 방법

1. 후크란

후크는 후크를 의미합니다. 실제로 후크는 실제로 함수를 작성하는 방법입니다. 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는 반응 후크를 학습하여 Composition API를 개발했습니다. 즉, Composition API를 사용자 정의하여 후크를 캡슐화할 수도 있다는 뜻입니다. vue3의 🎜🎜hooks는 함수를 작성하는 방법으로 파일의 일부 개별 함수의 js 코드를 추출하여 넣는 것입니다. 별도의 js 파일 또는 재사용 가능한 공용 메소드/함수로 변환합니다. 실제로 hooks는 vue2의 mixin과 다소 유사하지만 mixins와 비교하면 hooks< /code> code> 재사용된 함수코드의 소스를 명확하게 하여 더욱 명확하고 이해하기 쉽게 하였습니다. 🎜🎜2. 후크 사용법🎜🎜1. <code>src에 hooks 폴더를 생성하여 hook 파일을 저장합니다🎜🎜🎜🎜2. 필요에 따라 후크 파일을 작성합니다. 페이지를 클릭할 때 마우스의 현재 위치를 기록하는 함수를 사용하면 hooks 폴더에 새 파일 useMousePosition.ts, 🎜

// 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 파일을 만들 수 있습니다. 사용법: test.vue 파일과 같이 hook 기능을 사용해야 하는 구성 요소에 사용: 🎜rrreee

위 내용은 vue3에서 후크를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!