Vue3 프로젝트에서 후크를 사용하는 방법

후크 기능

vue3의 후크 기능은 vue2의 믹스인과 동일합니다. 차이점은 후크가 기능이라는 것입니다.

vue3의 후크 기능은 코드의 재사용성을 향상시키고 다양한 구성 요소에서 사용할 수 있습니다.

hooks 기능은 믹스인과 함께 사용할 수 있지만 권장되지 않습니다.

후크의 기본 사용

우선 후크에 대해서는 신경 쓰지 않습니다. 먼저 페이지의 너비와 높이 값을 가져오는 작은 함수를 작성해 보겠습니다. 다 옛날 배우들이니까 저희도 하나 완성해보겠습니다.

자세히는 하지 않고 그냥 코드를 작성해 봅시다.

<template>
  <h4>hooks</h4>

  <p>页面宽度: {{screen.width}}</p>
  <p>页面高度: {{screen.height}}</p>

  <el-button @click="getWH">获取页面的宽高</el-button>
</template>
<script setup>
  import { reactive } from &#39;vue&#39;

  const screen = reactive({
    width: 0,
    height: 0
  })

  const getWH = () => {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
  }

</script>
<style scoped>

</style>

위 코드는 실제로 표시되는 페이지의 길이와 너비를 표시하는 두 개의 레이블이 있고 표시할 최신 길이와 너비를 가져오는 버튼이 있습니다.

이 기능은 원활하게 구현될 수 있습니다. 이 기능을 다른 페이지에 구현해야 하는 경우에도 매우 간단합니다. 구현해야 하는 다른 페이지에 위 코드를 직접 복사하면 됩니다.

그런데

문제를 발견하셨나요? 즉, 필요하면 페이지를 복사하고, 필요하면 페이지를 복사하고, 백 페이지가 있으면 백 번 복사하고, 코드 한두 줄이면 됩니다. 괜찮습니다. 매우 거대한 도구 클래스이므로 이렇게 구현하면 너무 복잡하고 구현하기가 쉽지 않습니다. 그렇다면 이 문제를 어떻게 해결해야 할까요? 아 하하하하, 그렇군요 여러분, 훅입니다.

위의 경우 Hook을 사용하여 간단하게 구현해봤습니다.

먼저 src 폴더 아래에 Hooks 폴더를 생성합니다.

hooks 폴더에 useScreenWh.js file

이라는 파일을 만듭니다. 다음 단계는 매우 간단합니다. 시각적 인터페이스를 이 js 파일에 가져오는 코드를 넣은 다음 다른 사용자에게 내보냅니다. 그 페이지.

import { reactive } from 'vue'

export default function () {  // 导出一个默认方法

  // 创建一个对象，保存宽度和高度值
  const screen = reactive({
    width: 0,
    height: 0
  })

  // 创建一个方法，获取可视化界面的宽度和高度值
  const getWH = () => {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
  }

  return { screen, getWH }  // 方法返回宽高值
}

그런 다음 후크를 사용해야 하는 파일로 가져와서 사용할 수 있습니다.

<template>
  <h4>hooks</h4>

  <p>页面宽度: {{screen.width}}</p>
  <p>页面高度: {{screen.height}}</p>

  <el-button @click="getWH">获取页面的宽高</el-button>

</template>
<script setup lang="ts">

  // 导入 hooks 
  import screenWH from &#39;../hooks/useScreenWh.js&#39;

  // 因为 screenWH 是一个导出的方法，所以需要调用一下子，然后顺便解构一下就可以在模板使用了。
  let { screen, getWH } = screenWH()

</script>
<style scoped>

</style>

좋아요, 저장하고 효과를 확인해 볼까요?

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