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

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