Vue 総合アップグレードガイド: 構成 API の詳細な調査-jsチュートリアル-php.cn

Vue Comprehensive Upgrade Guide: In-depth Exploration of Composition API

Comboposition API の中心となる概念と機能
- setup() 関数:
- 参照とリアクティブ:
- 計算されたプロパティとリスナー:
- 合成関数
- ライフサイクルフック:
Composition API 書き込みコンポーネント
オプション API からコンポジション API への移行
- コンポーネントの構造
- 依存関係の注入
- テンプレートのリファクタリング

Vue 3.x の包括的なアップグレードでは、コンポジション API が導入されています。これは、Vue 2.x の従来のオプション API を大幅に改善したものです。これは、コードを編成するためのより柔軟でモジュール式の方法を提供します。

Comboposition API の中心となる概念と機能

setup() 関数:

Vue 3 のコアエントリポイント。コンポーネントの状態とロジックを設定するために使用され、beforeCreate フックの後と create フックの前に実行されます。データやメソッドなどのオプションで元々定義されていた内容を置き換えます。

import { ref, computed } from "vue";

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

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};

ログイン後にコピー

ref とリアクティブ:

応答データの作成に使用され、ref は基本タイプの応答データの作成に使用され、reactive はオブジェクトと配列の応答プロキシに使用されます。

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};

ログイン後にコピー

計算されたプロパティとリスナー:

computed は、依存関係が変更された場合にのみ再計算される計算プロパティを作成するために使用されます。

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};

ログイン後にコピー

watch は、応答データの変更を監視し、変更が発生したときにコールバックを実行するために使用されます。

import { ref, watch } from "vue";

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

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

ログイン後にコピー

合成関数

Composition API は、再利用可能な合成関数の作成を促進します。

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};

ログイン後にコピー

ライフサイクルフック:

Vue 3 のライフサイクルフックは setup() 内で直接使用されなくなり、onBeforeMount や onMounted などの新しいライフサイクルフック関数を通じて使用されます。

1. onBeforeMount: このフックは、コンポーネントが DOM にマウントされる前に呼び出されます。これは、Vue 2.x の beforeMount ライフサイクルフックに似ています。

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};

ログイン後にコピー

2. onMounted: コンポーネントが DOM にマウントされた直後に呼び出されます。 Vue 2.x にマウントされているものと同等

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};

ログイン後にコピー

3. onBeforeUpdate: コンポーネントデータが更新される前、ただし DOM 更新が開始される前に呼び出されます。 Vue 2.x の beforeUpdate に似ています。

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};

ログイン後にコピー

4. onUpdated: コンポーネントデータの変更による DOM 更新が完了した後に呼び出されます。 Vue 2.x で更新されたものと同等

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};

ログイン後にコピー

5. onBeforeUnmount: コンポーネントがアンインストールされる前に呼び出されます。 Vue 2.x の beforeDestroy に似ています。

import { ref, computed } from "vue";

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

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};

ログイン後にコピー

6. onUnmounted: コンポーネントがアンインストールされた後に呼び出されます。 Vue 2.x で破棄されたものと同等

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};

ログイン後にコピー

7. onActivated: コンポーネントがでラップされた場合にのみ呼び出されます。が有効化されます。

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};

ログイン後にコピー

8. onDeactivated: コンポーネントがでラップされた場合にのみ呼び出されます。無効化されています。

import { ref, watch } from "vue";

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

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

ログイン後にコピー

構成 API の作成コンポーネント

レスポンシブなデータを作成する: ref と reactive を使用してレスポンシブな変数を作成します。
計算プロパティ: 計算関数を使用して計算プロパティを作成します。
レスポンシブ関数: toRefs() と toRef() を使用して、オブジェクトのプロパティをレスポンシブに変換します。
リスナー: watch または watchEffect を使用してデータの変更を監視します。

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};

ログイン後にコピー

レスポンシブデータの作成: reactive を使用して、cityInput、都市、天気を含むレスポンシブオブジェクトを作成します。 ref は、基本的なタイプの応答性データにも使用できますが、このシナリオでは、複数の状態の管理には reactive の方が適しています。
計算プロパティ: currentCity 計算プロパティは、state.cityInput の値を直接返します。この例では v-model="cityInput" を直接使用する方が直感的かもしれませんが、計算されたプロパティを定義する方法を示しています。
応答関数: toRefs を使用して、状態オブジェクトのプロパティを、テンプレート内で直接バインドするための独立した応答参照に変換します。これは、テンプレートでは直接の構造化代入 (const { cityInput } = state; など) で十分であるため、変換関数自体ではなく主に応答データの使用を示しています。
リスナー: ウォッチを使用して cityInput の変化をリッスンし、入力が変化するたびに気象状態をクリアして、次回クエリできるようにします。

オプション API からコンポジション API への移行

コンポーネントの構造

状態、メソッド、ロジックを個別の関数に分離します。オプション API では、通常、コンポーネントオプションでデータ、メソッド、計算などを定義します。 Comboposition API では、これらのロジックは別個の関数に分割されます。例:

オプション API:

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};

ログイン後にコピー

合成 API:

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};

ログイン後にコピー

依存関係の注入

provide と inject を使用します。オプション API では、provide と inject を使用してデータを渡します。 Comboposition API では、このプロセスは変わりません:

オプション API:

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};

ログイン後にコピー

合成 API:

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};

ログイン後にコピー

テンプレートのリファクタリング

バインドされたプロパティとメソッドをこれから直接参照に変換します。

以上がVue 総合アップグレードガイド: 構成 API の詳細な調査の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Vue 総合アップグレード ガイド: 構成 API の詳細な調査

Comboposition API の中心となる概念と機能

setup() 関数:

ref とリアクティブ:

計算されたプロパティとリスナー:

合成関数

ライフサイクルフック:

構成 API の作成コンポーネント

オプション API からコンポジション API への移行

コンポーネントの構造

依存関係の注入

テンプレートのリファクタリング

Vue 総合アップグレードガイド: 構成 API の詳細な調査