목차
Composition Api는 낮은 결합도와 높은 응집도를 달성하기 위해 Vue2 Option Api를 분리합니다
Vue3의 사용자 정의 Hooks 정의:
간단한 덧셈과 뺄셈 계산, 별도의 덧셈과 뺄셈을 2개의 커스텀 Hooks로 분리하고 반응형 데이터를 서로 전송합니다
Mixin이 부족합니다
Vue3 사용자 정의 Hook은
하지만. Vue3 사용자 정의 Hooks는 다음을 수행할 수 있습니다.
Vue3 사용자 정의 Hook은 도입 시 동일한 이름으로 변수 이름을 바꿀 수 있습니다.
웹 프론트엔드 View.js Vue3에서 Hook을 사용자 정의하는 방법

Vue3에서 Hook을 사용자 정의하는 방법

May 11, 2023 pm 06:22 PM
vue3 hooks

    Composition Api는 낮은 결합도와 높은 응집도를 달성하기 위해 Vue2 Option Api를 분리합니다

    참고: Composition Api가 복잡한 기능과 엄청난 양의 코드를 포함하는 구성 요소인 경우 사용자 정의 Hooks와 협력하여 코드를 블록 단위로 작성합니다. 예를 들어, 반응형 변수와 메소드는 A 함수 아래에 통합되어 있습니다. 나중에 유지 관리하려면 A 함수 모듈 아래의 코드만 변경하면 됩니다. 논리적으로 분산된 방식과 데이터 방식에 동시에 주목해야 하는 옵션 Api입니다.

    그러므로 Vue3에서 사용자 정의 Hook을 작성하는 방법을 마스터해야 합니다! 이 모든 것은 Vue3 Composition Api의 낮은 결합과 높은 응집력이라는 아이디어를 구현합니다! 공식 문서와 오픈 소스 관리 템플릿을 읽은 후 저자는 수많은 사용자 정의 Hooks를 사용합니다!

    Vue3의 사용자 정의 Hooks 정의:

    공식에서는 사용자 정의 Hooks가 무엇인지 명확하게 나타내거나 정의하지 않지만 모든 곳에서 사용됩니다. 높은 응집력과 낮은 결합도 목표를 달성하기 위해 언제든지

      재사용 가능한 함수를 외부 JS 파일로 추출
    • 함수 이름/파일 이름은 useXX
    • 형식으로 use로 시작합니다. 참조 시 반응형 변수 또는 메소드(예: const {nameRef, Fn} = useXX()
    • (설정 함수에서 사용자 정의 후크의 변수 및 메소드 분해)
    • 예:

    간단한 덧셈과 뺄셈 계산, 별도의 덧셈과 뺄셈을 2개의 커스텀 Hooks로 분리하고 반응형 데이터를 서로 전송합니다

      덧셈 함수-Hook
    • import { ref, watch } from 'vue';
      const useAdd= ({ num1, num2 })  =>{
          const addNum = ref(0)
          watch([num1, num2], ([num1, num2]) => {
              addFn(num1, num2)
          })
          const addFn = (num1, num2) => {
              addNum.value = num1 + num2
          }
          return {
              addNum,
              addFn
          }
      }
      export default useAdd
      로그인 후 복사
      뺄셈 함수-Hook
    • //减法功能-Hook
      import { ref, watch } from 'vue';
      export function useSub  ({ num1, num2 }){
          const subNum = ref(0)
          watch([num1, num2], ([num1, num2]) => {
              subFn(num1, num2)
          })
          const subFn = (num1, num2) => {
              subNum.value = num1 - num2
          }
          return {
              subNum,
              subFn
          }
      }
      로그인 후 복사
      덧셈 및 뺄셈 계산 구성 요소
    • <template>
          <div>
              num1:<input v-model.number="num1"  />
              <br />
              num2:<input v-model.number="num2"  />
          </div>
          <span>加法等于:{{ addNum }}</span>
          <br />
          <span>减法等于:{{ subNum }}</span>
      </template>
      
      <script setup>
      import { ref } from &#39;vue&#39;
      import useAdd from &#39;./useAdd.js&#39;     //引入自动hook 
      import { useSub } from &#39;./useSub.js&#39; //引入自动hook 
      
      const num1 = ref(2)
      const num2 = ref(1)
      //加法功能-自定义Hook(将响应式变量或者方法形式暴露出来)
      const { addNum, addFn } = useAdd({ num1, num2 })
      addFn(num1.value, num2.value)
      //减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)
      const { subNum, subFn } = useSub({ num1, num2 })
      subFn(num1.value, num2.value)
      </script>
      로그인 후 복사
    • Vue2 시대의 Vue3 사용자 정의 Hooks와 Mixin의 관계:

    Mixin이 부족합니다

    Vue 2에서 mixin은 일부 구성 요소 로직을 재사용 가능한 블록으로 추상화하는 주요 도구입니다. 그러나 몇 가지 문제가 있습니다.

    1. 믹스인은 충돌하기 쉽습니다. 각 믹스인의 속성이 동일한 구성 요소로 병합되므로 속성 이름 충돌을 피하기 위해 다른 모든 기능을 이해해야 합니다.

    2. 재사용성은 제한됩니다. 논리를 변경하기 위해 믹스인에 매개변수를 전달할 수 없으므로 추상 논리의 유연성이 감소합니다.

    위 문단은 Vue3 공식 문서의 내용으로, 다음과 같이 요약하고 보완할 수 있습니다:

    1. 추적하기 어려운 메소드 및 속성을 혼합합니다.

    Vue3 사용자 정의 Hook은

    Vue3 사용자 정의 Hook이 될 수 있으며, 참조할 때 반응형 변수가 사용됩니다. 또는 메소드가 다음과 같이 명시적으로 노출됩니다.

    const {nameRef, Fn} = useXX()

    Mixins
    export default {
      mixins: [ a, b, c, d, e, f, g ], //一个组件内可以混入各种功能的Mixin
      mounted() {
        console.log(this.name)  //问题来了,这个name是来自于哪个mixin?
      }
    }
    로그인 후 복사

    Mixin 알 수 없는 혼란으로 인해 어떤 Mixin 파일에 속성이 있는지 알 수 없습니다.

    Vue3 커스텀 Hooks

    //加法功能-自定义Hook(将响应式变量或者方法形式暴露出来)
    const { addNum, addFn } = useAdd({ num1, num2 })
    addFn(num1.value, num2.value)
    //减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)
    const { subNum, subFn } = useSub({ num1, num2 })
    subFn(num1.value, num2.value)
    로그인 후 복사

    각 Hook에서 명시적으로 노출된 반응형 변수와 메소드를 쉽게 볼 수 있습니다

    2. 로직을 변경하기 위해 Mixin에 매개변수를 전달하는 것은 불가능합니다

    하지만. Vue3 사용자 정의 Hooks는 다음을 수행할 수 있습니다.

    Vue3 사용자 정의 Hooks는 논리를 변경하기 위해 모든 매개변수를 유연하게 전달할 수 있습니다. 매개변수는 다른 후크에 의해 노출된 변수로 제한되지 않습니다.

    Mixins

    export default {
      mixins: [ addMixin, subMixin], //组件内混入加法和减法Mixin
      mounted(){
          this.add(num1,num2) //调用addMixin内部的add方法
          this.sub(num1,num2) //调用subMixin内部的sub方法
      }  
    }
    로그인 후 복사

    Mixin 내부 메소드를 호출하여 매개변수를 전달할 수 있습니다. Mixin에 직접 매개변수를 전달할 수 없습니다. Mixin은 함수 형태로 노출되지 않기 때문에 매개변수가 전달되지 않습니다.

    Vue3 사용자 정의 Hook

    위의 예를 기반으로 평균 Hook을 추가합니다

    //平均功能-Hook
    import { ref, watch } from "vue";
    export function useAverage(addNum) {
      const averageNum = ref(0);
      watch(addNum, (addNum) => {
        averageFn(addNum);
      });
      const averageFn = (addNum) => {
        averageNum.value = addNum / 2;
      };
      return {
        averageNum,
        averageFn,
      };
    }
    로그인 후 복사

    Component에서

    //组件内
    //加法功能-自定义Hook(将响应式变量或者方法形式暴露出来)
    const { addNum, addFn } = useAdd({ num1, num2 })
    addFn(num1.value, num2.value)//主动调用,返回最新addNum
    //平均功能-自定义Hook- hook传入参数值来其他hook暴露出来的变量
    const { averageNum, averageFn} = useAverage(addNum)
    averageFn(addNum.value)
    로그인 후 복사

    Vue3 사용자 정의 Hooks 변경하기 위해 모든 매개변수를 유연하게 전달할 수 있습니다. 논리와 매개변수는 다른 후크에 의해 노출된 변수로 제한되지 않으므로 추상 논리에서 Vue3의 유연성이 향상됩니다.

    3. 이름이 같은 Mixin 변수는 덮어쓰여집니다.

    Vue3 사용자 정의 Hook은 도입 시 동일한 이름으로 변수 이름을 바꿀 수 있습니다.

    Mixins

    export default {
      mixins: [ addMixin, subMixin], //组件内混入加法和减法Mixin
      mounted(){
          this.add(num1,num2) //调用加法addMixin内部的add方法
          this.sub(num1,num2) //调用减法subMixin内部的sub方法
      }  
    }
    로그인 후 복사

    this.add(num1,num2) 및 this.sub(num1,num2) ) 계산 결과에서 반환된 동일한 이름의 변수 totalNum은 JS 단일 스레드로 인해 나중에 도입된 것이 이전 변수를 덮어쓰게 되며 totalNum은 궁극적으로 빼기 값입니다. sub

    Vue3 custom Hooks

    //加法功能-自定义Hook(将响应式变量或者方法形式暴露出来)
    const { totalNum:addNum, addFn } = useAdd({ num1, num2 })
    addFn(num1.value, num2.value)
    //减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)
    const { totalNum:subNum, subFn } = useSub({ num1, num2 })
    subFn(num1.value, num2.value)
    로그인 후 복사

    In Vue3 custom Hooks, 덧셈과 뺄셈 후크는 둘 다 totalNum을 반환하지만 ES6 객체 구조 분해를 사용하면 변수 이름을 쉽게 바꿀 수 있습니다

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

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    vue3+vite: src에서 이미지를 동적으로 가져오기 위해 require를 사용할 때 오류를 해결하는 방법 vue3+vite: src에서 이미지를 동적으로 가져오기 위해 require를 사용할 때 오류를 해결하는 방법 May 21, 2023 pm 03:16 PM

    vue3+vite:src는 require를 사용하여 이미지를 동적으로 가져오고 vue3+vite는 여러 이미지를 동적으로 가져옵니다. vue3을 사용하는 경우 require는 이미지를 사용할 수 없습니다. imgUrl:require(' .../assets/test.png') 와 같은 vue2는 typescript가 require를 지원하지 않기 때문에 가져오므로 이를 해결하는 방법은 다음과 같습니다. waitimport를 사용합니다.

    vue3 프로젝트에서tinymce를 사용하는 방법 vue3 프로젝트에서tinymce를 사용하는 방법 May 19, 2023 pm 08:40 PM

    tinymce는 완전한 기능을 갖춘 리치 텍스트 편집기 플러그인이지만,tinymce를 vue에 도입하는 것은 다른 Vue 리치 텍스트 플러그인만큼 원활하지 않습니다.tinymce 자체는 Vue에 적합하지 않으며 @tinymce/tinymce-vue를 도입해야 합니다. 외국 서식 있는 텍스트 플러그인이며 중국어 버전을 통과하지 못했습니다. 공식 웹사이트에서 번역 패키지를 다운로드해야 합니다(방화벽을 우회해야 할 수도 있음). 1. 관련 종속성을 설치합니다. npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 중국어 패키지를 다운로드합니다. 3. 프로젝트 공용 폴더에 스킨과 중국어 패키지를 새로 만들고 다운로드합니다.

    Vue3가 마크다운을 구문 분석하고 코드 강조 표시를 구현하는 방법 Vue3가 마크다운을 구문 분석하고 코드 강조 표시를 구현하는 방법 May 20, 2023 pm 04:16 PM

    Vue로 블로그 프론트엔드를 구현하려면 마크다운 파싱을 구현해야 합니다. 코드가 있는 경우 코드 하이라이팅을 구현해야 합니다. markdown-it, vue-markdown-loader,marked,vue-markdown 등과 같은 Vue용 마크다운 구문 분석 라이브러리가 많이 있습니다. 이 라이브러리는 모두 매우 유사합니다. 여기서는 Marked가 사용되었고, 코드 하이라이팅 라이브러리로 하이라이트.js가 사용되었습니다. 구체적인 구현 단계는 다음과 같습니다. 1. 종속 라이브러리를 설치합니다. vue 프로젝트에서 명령 창을 열고 다음 명령 npminstallmarked-save//marked를 입력하여 markdown을 htmlnpmins로 변환합니다.

    Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법 Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법 May 26, 2023 pm 05:31 PM

    페이지를 부분적으로 새로 고치려면 로컬 구성 요소(dom)의 다시 렌더링만 구현하면 됩니다. Vue에서 이 효과를 얻는 가장 쉬운 방법은 v-if 지시어를 사용하는 것입니다. Vue2에서는 v-if 명령을 사용하여 로컬 DOM을 다시 렌더링하는 것 외에도 새 빈 구성 요소를 만들 수도 있습니다. 로컬 페이지를 새로 고쳐야 할 경우 이 빈 구성 요소 페이지로 점프한 다음 다시 돌아올 수 있습니다. 빈 원본 페이지의 beforeRouteEnter 가드. 아래 그림과 같이 Vue3.X에서 새로 고침 버튼을 클릭하여 빨간색 상자 안에 DOM을 다시 로드하고 해당 로딩 상태를 표시하는 방법입니다. Vue3.X의 scriptsetup 구문에 있는 구성 요소의 가드에는

    vue3 프로젝트가 패키징되어 서버에 게시된 후 액세스 페이지가 공백으로 표시되는 문제를 해결하는 방법 vue3 프로젝트가 패키징되어 서버에 게시된 후 액세스 페이지가 공백으로 표시되는 문제를 해결하는 방법 May 17, 2023 am 08:19 AM

    vue3 프로젝트가 패키징되어 서버에 게시되면 액세스 페이지에 공백 1이 표시됩니다. vue.config.js 파일의 publicPath는 다음과 같이 처리됩니다. const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='생산'?'./':'/&

    Vue3 재사용 가능한 구성 요소를 사용하는 방법 Vue3 재사용 가능한 구성 요소를 사용하는 방법 May 20, 2023 pm 07:25 PM

    머리말 Vue든 React든, 여러 개의 반복되는 코드를 접하게 되면, 파일을 중복된 코드 덩어리로 채우는 대신, 이러한 코드를 어떻게 재사용할 수 있을지 고민해 보겠습니다. 실제로 vue와 React 모두 컴포넌트를 추출하여 재사용할 수 있지만, 작은 코드 조각이 발견되어 다른 파일을 추출하고 싶지 않은 경우, 이에 비해 React는 동일한에서 사용할 수 있습니다. 파일에서 해당 위젯을 선언합니다. 또는 다음과 같은 renderfunction을 통해 구현합니다. constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

    DefineCustomElement를 사용하여 Vue3에서 구성 요소를 정의하는 방법 DefineCustomElement를 사용하여 Vue3에서 구성 요소를 정의하는 방법 May 28, 2023 am 11:29 AM

    Vue를 사용하여 사용자 정의 요소 구축 WebComponents는 개발자가 재사용 가능한 사용자 정의 요소(customelements)를 생성할 수 있는 웹 네이티브 API 세트의 집합적 이름입니다. 사용자 정의 요소의 주요 이점은 프레임워크 없이도 어떤 프레임워크에서도 사용할 수 있다는 것입니다. 다른 프런트 엔드 기술 스택을 사용하는 최종 사용자를 대상으로 하거나 사용하는 구성 요소의 구현 세부 사항에서 최종 애플리케이션을 분리하려는 경우에 이상적입니다. Vue와 WebComponents는 보완적인 기술이며 Vue는 사용자 정의 요소를 사용하고 생성하는 데 탁월한 지원을 제공합니다. 사용자 정의 요소를 기존 Vue 애플리케이션에 통합하거나 Vue를 사용하여 빌드할 수 있습니다.

    Vue3에서 아바타를 선택하고 자르는 방법 Vue3에서 아바타를 선택하고 자르는 방법 May 29, 2023 am 10:22 AM

    최종 효과는 VueCropper 컴포넌트 Yarnaddvue-cropper@next를 설치하는 것입니다. 위의 설치 값은 Vue2이거나 다른 방법을 사용하여 참조하려는 경우 공식 npm 주소: 공식 튜토리얼을 방문하세요. 컴포넌트에서 참조하고 사용하는 것도 매우 간단합니다. 여기서는 해당 컴포넌트와 해당 스타일 파일을 소개하기만 하면 됩니다. 여기서는 import{userInfoByRequest}from'../js/api만 소개하면 됩니다. 내 구성 요소 파일에서 import{VueCropper}from'vue-cropper&

    See all articles