>웹 프론트엔드 >View.js >vue3에서 후크를 사용하는 방법

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

WBOY
WBOY앞으로
2023-05-11 22:58:121631검색

1. 후크란

후크는 후크를 의미합니다. 실제로 후크는 실제로 함수를 작성하는 방법입니다. hooks 还真是函数的一种写法。

vue3 借鉴 react hooks 开发出了 Composition API ,所以也就意味着 Composition API 也能进行自定义封装 hooks

vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能。其实 hooksvue2 中的 mixin 有点类似,但是相对 mixins 而言, hooks 更清楚复用功能代码的来源, 更清晰易懂。

二、hooks的用法

1.在src中创建一个hooks文件夹,用来存放hook文件

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

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 파일 또는 재사용 가능한 공용 메소드/함수로 변환합니다. 실제로 hooksvue2mixin과 다소 유사하지만 mixins와 비교하면 hooks code> 재사용된 함수코드의 소스를 명확하게 하여 더욱 명확하고 이해하기 쉽게 하였습니다. 🎜🎜2. 후크 사용법🎜🎜1. <code>srchooks 폴더를 생성하여 hook 파일을 저장합니다🎜🎜vue3에서 후크를 사용하는 방법🎜🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 yisu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제