VueでのオプションAPIの使用停止

パヴェウ・ドルゴシュ

Vue.js開発者

なぜDueでOptions APIを使うべきでないのか？以下の記事でその答えを見つけ、Composition APIの利点を発見してください。

Vue 3 と呼ばれるコンポーネントを作成するための新しいアプローチを導入した。 コンポジション API.に代わるものである。 オプションAPI.コンポジションAPIは完全なオプションであり、以下を使用したい場合は使用する必要はない。 Vue 3.しかし、作業を容易にし、読みやすさを向上させるいくつかの重要な改善点が導入されています。コード.

オプションAPIに対するコンポジションAPIの利点

1.より良いコード構成と読みやすさ。

コンポジションAPIには セットアップ.この中で、次のようなコンポーネントに必要なすべての要素を作成することができる： データ, 方法, 計算特性, 観戦者.このおかげで、ある機能を担当するロジックを一箇所にまとめることで、コードをすっきりさせることができる。対照的に、Options APIでは、ファイル中にロジックを散在させることを余儀なくされた。その結果、コードは読みにくく、スクロールが必要でした。Composition APIでは、メソッドやウォッチャーなどをタイプ別にグループ化する必要がなくなりました。

2.ロジックの抽出と再利用

Composition APIを使えば、どこでもリアクティブなコードを書くことができる。コンポーネントの外部にリアクティブ・ロジックを引き出せる。この種のコードは コンポーザブル.Composablesは多くのコンポーネントにインポートすることができ、いくつかのロジックをカプセル化し、必要なリアクティブ要素を公開することができます。

// shopping-list.js
import ( computed ) from "vue"；

export function useShoppingList(listId) (
  const products = shoppingList.getAllProducts(listId)；
  const productsCount = computed(() => products.value.length)；
  const deleteProduct = (productId) => shoppingList.deleteProduct(productId)；

  return (
    products、
    productsCount、
    deleteProduct、
  );
)

// コンポーネント
useSpoppingListを"@/composables/shopping-list.js "からインポートする；
エクスポート・デフォルト (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList()；
    return ( products, productsCount, deleteProduct )；
  ),
);

3.コンポーネント内で定数や外部リソースを簡単に使用できます。

オプションAPIでは、たとえば別のファイルからインポートした静的リストを追加するには、それをdata()に追加するか（これはパフォーマンスに悪影響を及ぼします）、それを これ で created().どちらの方法もあまりエレガントではない。コンポジションAPIと新しい セットアップ このメソッドから、リアクティブなものだけでなく、定数や外部依存関係もエクスポートできる。

./list.json "からリストをインポートする；
エクスポート・デフォルト (
  setup() (
    return ( list )；
  ),
);

Vue 2のComposition APIを使用することもできます。

オフィシャルに感謝 vue/composition-api プラグインを使用する場合、Composition API は Vue 2 も同様だ。

新しいコンポジションAPIの使い方は？

<h3>セットアップ方法</h3>

setup() は Vue 3 ここに、データ・オブジェクトやメソッドなど、必要なものをすべて置くことができる。そこから、テンプレートに含めたい要素を返すことができます。

<template>
  <div>(( カウント ))</div>
</template>

import ( ref ) from "vue"；
エクスポート・デフォルト (
  setup() (
    const count = ref(10)；
    return ( count )；
  ),
);

リアクティブ()

リアクティブ・オブジェクトや配列を作成するには リアクティブ(デフォルト値) メソッドに渡すことができます。メソッドの引数でこのオブジェクトの初期値を渡すことができます。メソッドは 代理人 そのため、このオブジェクトに変更を加えるときは Vue はそれを知っており、ビューを適切にリフレッシュすることができる。

コンポジション API

import ( reactive ) from "vue"；
エクスポート・デフォルト (
  setup() (
    const user = reactive((
      name: "John"、
      role: "ADMIN"、
    ));
    return ( user )；
  ),
);

オプションAPI

輸出デフォルト(
  data() (
    を返す (
      user: (
        name: "John"、
        role: "ADMIN"、
      ),
    );
  ),
);

Reactive のみは、オブジェクト型（オブジェクト、配列、および 地図 そして セット).のようなプリミティブ型を保持することはできない。 ストリング, 番号 または ブーリアン.そのため、Vueも導入している。 ref().

ref()

プリミティブ要素に反応性を持たせるには、それを ref().

コンポジション API

import ( ref ) from "vue"；
エクスポート・デフォルト (
  setup() (
    const count = ref(10)；
    return ( count )；
  ),
);

オプションAPI

輸出デフォルト(
  data() (
    を返す (
      count：10,
    );
  ),
);

リアクティブ・オブジェクトの修正

オブジェクトの値はリアクティブ・メソッドから直接変更できるが、プリミティブな値を変更するには 価値 フィールドにいる。

import ( ref, reactive ) from "vue"；
エクスポート・デフォルト (
  setup() (
    const user = reactive((
      name: "John"、
    ));
    user.name = "John Doe"; // 値の変更

    const count = ref(10)；
    count.value = 20; // 値の変更

    return (
      ユーザー
      count、
    );
  ),
);

あなた ダメダメ を使用する必要がある。 価値 プロパティを使用する。

<div>(( カウント ))</div>

計算された特性

計算されたプロパティは、インポートされた 計算された メソッドを使用する。

import ( reactive, computed ) from "vue"；
エクスポート・デフォルト (
  setup() (
    const list = reactive([
      「アイテム1"、
      「アイテム2"、
    ]);

    // 計算される
    const isEmpty = computed(() => list.length === 0)；

    return (
      list、
      isEmpty、
    );
  ),
);

方法

メソッドをネストすることもできます。 セットアップ メソッドを使用する。

コンポジション API

import ( ref ) from "vue"；
エクスポート・デフォルト (
  setup() (
    const count = ref(10)；

        // メソッド
    const increment = () => (
      count.value++；
    );

    return (
      count、
      インクリメント、
    );
  ),
);

ウォッチャー

ウォッチャーは次のような方法で作成される。 計算された.ただし 代理人 オブジェクトすなわち 名称ではなく、下の例のように 名前.値 値そのものである。

import ( watch, ref ) from "vue"；
エクスポート・デフォルト (
  setup() (
    const name = ref("John")；
        // ウォッチャー
    watch(name, (currentValue, oldValue) => (
      console.log(`Value changed from $(oldValue)to $(currentValue)`)；
    ));
    return ( name )；
  ),
);

概要

この記事では、Composition APIがOptions APIとどのように異なり、どのような利点があるのかを大まかに理解していただくために、Composition APIの基本のみを説明しました。コンポジションAPIは、コンポーネントの残りの要素、例えば次のようなものに対する代替も提供します。 ホックなどの新しい手法を導入している。 ウォッチエフェクト.公式サイトで読むのが良いだろう。 Vue 3 ドキュメンテーション