Vue3 でフックをカスタマイズする方法

Composition API は Vue2 Option Api を分離して、低カップリングと高凝集性を実現します。

説明: Composition API が複雑な機能と、膨大な量のコードでは、カスタム フックを使用して機能ブロックにコードを記述し、変数とメソッドを一緒に定義して呼び出します。たとえば、応答性の高い変数とメソッドは関数 A の下に統合されます。後のメンテナンスのために、変更する必要があるのは、汎用モジュール A のコード。オプション API の Vue2 と同様に、論理的に分散されたメソッドとデータに同時に注意する必要があります。

したがって、Vue3 でのカスタム フックの作成はマスターする必要があります。これはすべて、Vue3 コンポジション API の低結合性と高凝集性のアイデアを体現しています。公式ドキュメントとオープンソースの管理テンプレートを読んだ後、著者は多数のカスタム フックを使用しています。

Vue3 のカスタム フックを定義する:

公式はカスタム フックが何であるかを明確に示したり定義したりしていませんが、カスタム フックはどこでも使用されます;

関数の形式で抽出します一部は再利用可能メソッドはフックのように掛けられており、高い凝集性と低い結合性という目標を達成するためにいつでも導入して呼び出すことができます;

• 再利用可能な関数を外部 JS ファイルに抽出します

• 関数名/ファイル名は use という形式で use で始まります: useXX

• 引用時にリアクティブ変数またはメソッドを明示的に分解して公開します。次のようになります: const {nameRef , Fn} = useXX()

• (setup 関数内のカスタム フックの変数とメソッドを分解します)

例:

単純な加算と減算の計算、加算と減算を 2 つのカスタム フックに分離し、応答性の高いデータを相互に転送します

• 加算関数-フック

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
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 カスタム フックと Mixin の関係:

不十分な Mixin

Vue 2 では、mixin は一部のコンポーネント ロジックを再利用可能なブロックのメイン ツールに抽象化します。ただし、いくつかの問題があります:

1. ミックスインは競合しやすいです: 各ミックスインのプロパティは同じコンポーネントにマージされるため、プロパティ名の競合を避けるためには、依然として互いの特性を理解する必要があります。 。

2. 再利用性は制限されています: ロジックを変更するためにミックスインにパラメータを渡すことはできないため、抽象ロジックの柔軟性が低下します。

上の段落は Vue3 公式ドキュメントの内容であり、次のように要約および補足できます:

1. 追跡が難しい Mixin メソッドと属性

Vue3カスタム フックは、

Vue3 カスタム フックで、次のような参照時に応答性の高い変数またはメソッドを明示的に公開できます。

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

us各フックによって明示的に公開されている応答性の変数とメソッドを確認するのは簡単です

2. ロジックを変更するために Mixin にパラメーターを渡すことはできません

しかし、Vue3 カスタム フックでは次のことができます:

Vue3 カスタム フックは、ロジックを変更するために任意のパラメータを柔軟に渡すことができます。パラメータは、他のフックによって公開される変数に限定されません。

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
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,
  };
}

コンポーネント内

//组件内
//加法功能-自定义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 カスタム フックは、ロジックを変更するために任意のパラメーターを柔軟に渡すことができます。パラメーターは、他のフックによって公開される変数に限定されないため、Vue3 の抽象ロジックの柔軟性が向上します。

3. 同じ名前の Mixin 変数は上書きされます

Vue3 カスタム フックは、導入時に同じ名前の変数の名前を変更できます

Mixins

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

If this .add(num1,num2) と this.sub(num1,num2) の計算結果によって返される同じ名前の変数 totalNum。JS シングルスレッドのため、後から導入されたものが以前のものを上書きし、最終的に totalNum になります。減算の値 sub

Vue3 カスタム フック

//加法功能-自定义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)

Vue3 カスタム フックでは、加算フックと減算フックは両方とも totalNum を返しますが、ES6 オブジェクトの構造化を使用して変数の名前を簡単に変更できます

以上がVue3 でフックをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。