So passen Sie Hooks in Vue3 an

Composition Api entkoppelt Vue2 Option Api, um eine geringe Kopplung und hohe Kohäsion zu erreichen

Hinweis: Wenn Composition Api komplexe Funktionen hat, Bei Komponenten mit einer großen Menge Code arbeiten wir mit benutzerdefinierten Hooks zusammen, um den Code in Funktionsblöcke zu schreiben, und Variablen und Methoden werden gemeinsam definiert und aufgerufen. Beispielsweise integriert die A-Funktion reaktionsfähige Variablen und Methoden, und wir müssen nur Änderungen vornehmen A. Für die spätere Wartung muss der Code unter dem Funktionsmodul nicht gleichzeitig auf logisch verstreute Methoden und Daten achten, wie Vue2 in Option Api.

Das Schreiben benutzerdefinierter Hooks in Vue3 muss also beherrscht werden! Alles verkörpert die Idee der geringen Kopplung und hohen Kohäsion der Vue3 Composition Api! Nach dem Lesen der offiziellen Dokumente und Open-Source-Administratorvorlagen verwendet der Autor eine große Anzahl benutzerdefinierter Hooks!

Definieren Sie die benutzerdefinierten Hooks von Vue3:

Obwohl der Beamte nicht klar angibt oder definiert, was benutzerdefinierte Hooks sind, werden sie überall verwendet; Extrahieren Sie einige wiederverwendbare Methoden in Form von Funktionen und hängen Sie sie wie Haken auf, die jederzeit eingeführt und aufgerufen werden können, um das Ziel einer hohen Kohäsion und einer geringen Kopplung zu erreichen # Wiederverwendbare Funktionen in externe JS-Dateien extrahieren

Der Funktionsname/Dateiname beginnt mit use in der Form: useXX

• #🎜 🎜 #

  Dekonstruieren Sie beim Zitieren explizit die reaktionsfähigen Variablen oder Methoden, z. B.: const {nameRef, Fn} = useXX()

• (im Setup Die Funktion dekonstruiert die Variablen und Methoden benutzerdefinierter Hooks)

• Beispiel:
• Einfache Additions- und Subtraktionsberechnungen, Abstraktion von Addition und Subtraktion in 2 benutzerdefinierte Hooks und Responsive Daten aneinander weitergeben

Additionsfunktion-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

# 🎜🎜##🎜🎜 #Subtraction Function-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
    }
}

#🎜🎜 ## 🎜🎜 ## 🎜🎜#Addition und Subtraktionsberechnungskomponente#🎜🎜 ## 🎜🎜 ## 🎜🎜#

<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>

#🎜 🎜#Die Beziehung zwischen benutzerdefinierten Vue3-Hooks und Mixin in der Vue2-Ära:

• Mixin-Mangel
  In Vue 2 abstrahiert Mixin einige Komponentenlogik in das Hauptwerkzeug zur Wiederverwendung von Blöcken. Sie haben jedoch mehrere Probleme:

1 Mixins sind anfällig für Konflikte: Da die Eigenschaften jedes Mixins in derselben Komponente zusammengefasst sind, müssen Sie immer noch Every verstehen, um Konflikte mit Eigenschaftsnamen zu vermeiden andere Funktion.

• 2. Die Wiederverwendbarkeit ist begrenzt: Wir können dem Mixin keine Parameter übergeben, um seine Logik zu ändern, was seine Flexibilität im Hinblick auf die abstrakte Logik verringert.
  Der obige Absatz ist der Inhalt des offiziellen Vue3-Dokuments, das wie folgt zusammengefasst und ergänzt werden kann:

1. Mixins schwer nachzuverfolgende Methoden und Attribute #🎜🎜 #

Benutzerdefinierte Vue3-Hooks können

• Vue3-benutzerdefinierte Hooks sein und bei der Referenzierung explizit reaktionsfähige Variablen oder Methoden offenlegen, wie zum Beispiel:

const {nameRef , Fn} = useXX()

Mixins

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

Unbekannte Mixin-Verwirrung, wir können einfach nicht wissen, aus welcher Mixin-Datei die Attribute stammen, was später zu Schwierigkeiten führt Wartung#🎜 🎜#

Vue3 Custom 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)

Wir können die reaktiven Variablen und Methoden, die von jedem Hooks explizit bereitgestellt werden, leicht sehen

2 Kann nicht an Mixin übermittelt werden Parameter übergeben, um die Logik zu ändern

Aber benutzerdefinierte Vue3-Hooks können:

Benutzerdefinierte Vue3-Hooks können flexibel beliebige Parameter übergeben, um ihre Logik zu ändern. Die Parameter sind nicht auf andere Hooks beschränkt. Offengelegte Variablen

Mixins

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

können Parameter durch den Aufruf interner Mixin-Methoden übergeben, können Parameter jedoch nicht direkt an Mixin übergeben, da Mixin nicht in Form einer Funktion verfügbar gemacht wird und dies auch der Fall ist nicht gesendet. Übergeben von Parametern

Vue3 benutzerdefinierter Hook

Fügen Sie einen durchschnittlichen Hook basierend auf dem obigen Beispiel hinzu

//平均功能-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,
  };
}

Innerhalb der Komponente

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

# 🎜🎜#Benutzerdefinierte Vue3-Hooks können beliebige Parameter flexibel übergeben, um ihre Logik zu ändern. Die Parameter sind nicht auf Variablen beschränkt, die von anderen Hooks bereitgestellt werden, was die Flexibilität von Vue3 in der abstrakten Logik verbessert.

3. Mixin-Variablen mit demselben Namen werden überschrieben

Der benutzerdefinierte Vue3-Hook kann Variablen mit demselben Namen umbenennen, wenn er eingeführt wird

Mixins#🎜 🎜 #

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

Wenn die Berechnungsergebnisse von this.add(num1,num2) und this.sub(num1,num2) aufgrund des JS-Einzelthreads die Variable totalNum mit demselben Namen zurückgeben, wird dies der später eingeführte tun Überschreiben Sie den vorherigen, und totalNum ist letztendlich eine Subtraktion. Der Wert von 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 geben sowohl Additions- als auch Subtraktions-Hooks totalNum zurück, it ist einfach zu verwendende ES6-Objektdestrukturierung, um Variablen Variablen zuzuweisen. Umbenennen

Das obige ist der detaillierte Inhalt vonSo passen Sie Hooks in Vue3 an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!