집 > 기사 > 웹 프론트엔드 > Vue3에서 Hook을 사용자 정의하는 방법

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

WBOY앞으로: 2023-05-11 18:22:131461검색

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

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

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

Vue3의 사용자 정의 Hooks 정의:

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

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

import { ref, watch } from &#39;vue&#39;;
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
import { ref, watch } from &#39;vue&#39;;
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>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

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

이전 기사：vue3+vue-cli4에서 svg를 사용하는 방법다음 기사：vue3+vue-cli4에서 svg를 사용하는 방법