Comment personnaliser les Hooks dans Vue3

Composition Api dissocie Vue2 Option Api pour obtenir un faible couplage et une cohésion élevée

Remarque : si Composition Api est un composant avec des fonctions complexes et une énorme quantité de code, nous coopérons avec des Hooks personnalisés pour écrire le code en blocs selon les fonctions, les variables et les méthodes sont définies et appelées ensemble. Par exemple, les variables et méthodes réactives sont intégrées sous la fonction A. Pour une maintenance ultérieure, il suffit de changer le code sous le module de fonction A. Ce ne sera pas comme Vue2. dans Option Api qui doit prêter attention aux méthodes et aux données logiquement dispersées en même temps.

Donc, l'écriture de Hooks personnalisés dans Vue3 doit être maîtrisée ! Tout cela incarne l'idée de faible couplage et de cohésion élevée de Vue3 Composition Api ! Après avoir lu les documents officiels et les modèles d'administration open source, l'auteur utilise de nombreux Hooks personnalisés !

Définir les Hooks personnalisés de Vue3 :

Bien que le responsable n'indique ni ne définisse clairement ce que sont les Hooks personnalisés, ils sont utilisés partout

Extraire certaines méthodes réutilisables sous forme de fonctions et les accrocher comme des hooks, peuvent être introduites et appelées ; à tout moment pour atteindre l'objectif de cohésion élevée et de faible couplage ;

• Extraire les fonctions réutilisables dans des fichiers JS externes

• Le nom de la fonction/le nom du fichier commence par use, sous la forme : useXX

• Déconstruire explicitement le variables ou méthodes réactives lors du référencement, telles que : const {nameRef, Fn} = useXX()

• (déconstruire les variables et les méthodes des hooks personnalisés dans la fonction de configuration)

Exemple :

Addition et soustraction simples calcul, séparez l'addition et la soustraction dans 2 Hooks personnalisés et transférez des données réactives les unes aux autres

• Fonction d'addition-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

• Fonction de soustraction-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
    }
}

• Composants de calcul d'addition et de soustraction

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

La relation entre les Hooks personnalisés Vue3 et Mixin à l'ère Vue2 :

Le mixin est insuffisant

Dans Vue 2, mixin est le principal outil pour abstraire certaines logiques de composants dans des blocs réutilisables. Cependant, ils présentent plusieurs problèmes :

1. Les mixins sont sujets aux conflits : comme les propriétés de chaque mixin sont fusionnées dans le même composant, vous devez toujours comprendre toutes les autres fonctionnalités afin d'éviter les conflits de noms de propriétés.

2. La réutilisabilité est limitée : nous ne pouvons transmettre aucun paramètre au mixin pour modifier sa logique, ce qui réduit leur flexibilité en logique abstraite.

Le paragraphe ci-dessus est le contenu du document officiel de Vue3, qui peut être résumé et complété comme suit :

1 Méthodes de mixage et attributs difficiles à tracer

Les Hooks personnalisés Vue3 peuvent être

Les Hooks personnalisés Vue3 et utiliser. variables réactives lors du référencement Ou la méthode est explicitement exposée, telle que :

const {nameRef, Fn} = useXX()

Mixins

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

Mixin confusion inconnue, nous ne pouvons tout simplement pas savoir de quel fichier Mixin proviennent les attributs, ce qui entraîne des difficultés pour la maintenance ultérieure

Hooks personnalisés Vue3

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

Nous pouvons facilement voir les variables réactives et les méthodes explicitement exposées par chaque Hook

2 Il est impossible de passer des paramètres à Mixin pour changer la logique

Mais les Hooks personnalisés Vue3. can:

Les Hooks personnalisés Vue3 peuvent transmettre de manière flexible n'importe quel paramètre pour modifier sa logique. Les paramètres ne sont pas limités aux variables exposées par d'autres hooks

Mixins

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

Vous pouvez transmettre des paramètres en appelant des méthodes internes de Mixin, mais vous ne pouvez pas transmettre. Paramètres directement à Mixin Parce que Mixin n'est pas exposé sous forme de fonction, aucun paramètre n'est transmis

Hook personnalisé Vue3

Ajoutez un Hook moyen basé sur l'exemple ci-dessus

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

Dans le composant

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

Les Hooks personnalisés Vue3 peuvent passer de manière flexible. tous les paramètres à modifier Sa logique et ses paramètres ne sont pas limités aux variables exposées par d'autres hooks, ce qui améliore la flexibilité de Vue3 en logique abstraite.

3. Les variables Mixin portant le même nom seront écrasées

Le Hook personnalisé Vue3 peut renommer les variables portant le même nom lorsqu'il est introduit

Mixins

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

Si this.add(num1,num2) et this.sub(num1,num2 ) La variable totalNum du même nom renvoyée par le résultat du calcul, en raison du thread unique JS, la dernière introduite écrasera la précédente, totalNum est finalement la valeur de la soustraction 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)

Dans Vue3 custom Hooks, bien que les Hooks d'addition et de soustraction renvoient tous deux totalNum, mais vous pouvez facilement renommer les variables en utilisant la déstructuration d'objet ES6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!