Vue 3 の結合された API を学習して、コンポーネント コードをより適切に整理および管理します

Vue 3 の組み合わせ API を学習してコンポーネント コードをより適切に整理および管理する

Vue 3 は Vue フレームワークの最新バージョンであり、多くのコマンドが導入されています。新しい機能と改善点。その中で最も注目に値するのはコンポジション API です。コンポーザブル API を使用すると、コンポーネント コードをより適切に整理および管理し、ロジックをより適切に再利用および共有できるようになります。

Vue 2 では、オプション API を使用してコンポーネントを定義および整理します。各コンポーネントには、コンポーネントのデータ、メソッド、ライフサイクル フックなどが含まれるオプション オブジェクトが含まれています。このアプローチでは、コンポーネントが大きくて複雑な場合、コードが混乱し、保守やテストが困難になる可能性があります。 Vue 3 の複合 API は、コンポーネントを作成するためのより簡潔で柔軟な構成可能な方法を提供します。

1. 基本的な使い方
結合 API は関数に基づいており、「合成」を通じてロジックを編成します。コンポーネントのロジックを小さな関数に分割し、これらの関数を組み合わせてコンポーネントを構築できます。

import { reactive, computed } from 'vue';

export default {
  setup() {
    // 响应式数据
    const state = reactive({
      count: 0,
    });

    // 计算属性
    const double = computed(() => state.count * 2);

    // 方法
    const increment = () => {
      state.count++;
    };

    return {
      state,
      double,
      increment,
    };
  },
};

この例では、setup 関数を使用してコンポーネントのロジックを設定します。 setup 関数は、コンポーネントが作成される前に呼び出される特別な関数です。 setup 関数でリアクティブ データ、計算されたプロパティ、およびメソッドを定義し、それらを戻り値として使用できます。

上記のコードでは、reactive 関数を使用して、count 属性を含む応答性の state オブジェクトを作成します。また、computed 関数を使用して、計算プロパティ double を定義します。この関数は、count プロパティの値を 2 で乗算します。最後に、increment メソッドを定義して、count 属性の値を増やします。 setup 関数の戻り値では、state、double、および increment をプロパティとしてエクスポートします。

2. ロジックの再利用
結合 API を使用すると、ロジックの再利用をより簡単に実装できます。よく使用されるロジックの一部をカスタム フックに抽出し、複数のコンポーネントで再利用できます。

// useCounter.js
import { reactive } from 'vue';

export default function useCounter(initialValue) {
  const state = reactive({
    count: initialValue,
  });

  const increment = () => {
    state.count++;
  };

  const decrement = () => {
    state.count--;
  };

  return {
    state,
    increment,
    decrement,
  };
}

// ComponentA.vue
import { computed } from 'vue';
import useCounter from './useCounter';

export default {
  setup() {
    const { state, increment, decrement } = useCounter(0);
    const double = computed(() => state.count * 2);

    // ...

    return {
      state,
      double,
      increment,
      decrement,
    };
  },
};

// ComponentB.vue
import { computed } from 'vue';
import useCounter from './useCounter';

export default {
  setup() {
    const { state, increment, decrement } = useCounter(100);
    const half = computed(() => state.count / 2);

    // ...

    return {
      state,
      half,
      increment,
      decrement,
    };
  },
};

この例では、カウント ロジックを処理するカスタム HookuseCounter を作成しました。 useCounter関数はパラメータとして初期値を受け取り、リアクティブなデータとメソッドを含むオブジェクトを返します。カウントロジックを必要とする任意のコンポーネントで useCounter 関数を呼び出し、戻り値のプロパティを使用できます。

ComponentA.vue と ComponentB.vue では、異なる初期値を使用して useCounter 関数を呼び出し、return を使用しました。プロパティを使用して、さまざまな計算ロジックを実装します。

3. 他の API と組み合わせて使用​​する
結合された API は、ライフサイクル フックやカスタム命令などの Vue の他の API と柔軟に組み合わせることができ、コンポーネントをより適切に制御できるようになります。行動。

import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    // 组件挂载时触发
    onMounted(() => {
      console.log('Component is mounted');
    });

    // 组件卸载前触发
    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });

    // ...

    return {
      count,
      increment,
    };
  },
};

この例では、ref 関数を使用して応答性の count 変数を作成し、値を増やす increment メソッドを定義します。 ＃＃＃カウント＃＃＃。また、onMounted フックと onBeforeUnmount フックを使用して、コンポーネントのマウント時およびアンマウント時に対応する操作を実行します。 結合された API により、コンポーネント コードを編成および管理するための、より柔軟で構成可能かつテスト可能な方法が得られます。ロジックを分割して再利用することで、コードの読みやすさ、保守性、拡張性を向上させることができます。 Vue 3 のコンポーザブル API をまだ試していない場合は、今が良い機会です。

以上がVue 3 の結合された API を学習して、コンポーネント コードをより適切に整理および管理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。