Vue3 コンポジション API の紹介

Vue3.0 は 7 月に rc 版をリリースしました。vue-cli4.5 以降では、体験版として vue3 を代替バージョンとして選択することもサポートされています。vue3 の正式版もそう遠くないと思われます。もう学べない！！！！
vue2.0 バージョン (Option API) と比較すると、Composition API は 3.0 での主な変更点の 1 つです。

概要

Composition API は主に React Hooks からヒントを得ています。その目的は、低干渉の機能的 API のセットを通じて、コンポーネントのロジックをより柔軟に「組み合わせる」ことを可能にすることです。

例

<テンプレート>
 <div>{{count}}</div>
 <button @click="addCount">追加</button>
</テンプレート>

<script lang="ts">
'vue' から defineComponent、ref、onMounted をインポートします。

エクスポートデフォルトdefineComponent({
 名前: 'アプリ'、
 設定 （） {
  定数カウント = ref(0)
  定数getCount = () => {
   count.value = Math.floor(Math.random() * 10)
  }
  定数addCount = () => {
   カウント値++
  }
  マウント時(() => {
   カウントを取得する()
  })

  戻る {
   カウント、
   追加カウント
  }
 }
});
</スクリプト>

名前が示すように、Composition API は、data や mounted などのパラメータを渡さなくなりました。代わりに、ref や onMounted などのメソッドを導入することで、データの双方向バインディングとライフサイクル関数の実行を実装します。

なぜそれが必要なのでしょうか?

1. コンポーネントが複雑な場合、オプションによって強制的に分離されることなく、ロジックコードを結合できます。これにより、コード品質の上限が上がり、コード品質の下限も下がります。公式サイトの比較表：

2. 再利用を促進。

vue2 では、ロジックコードを再利用したい場合は、mixin を通じて追加できます。しかし、ミックスインの内容は実際には直感的ではなく、同じ名前は上書きされます。コンポジション API では、すべてのメソッドがインポートされるため、単一のロジックをカプセル化できます。たとえば、確認コードを送信するためのカウントダウン機能をカプセル化します。

<テンプレート>
 <input type="number" placeholder="確認コードを入力してください">
 <button v-if="count">{{count}} 秒後に再送信できます</button>
 <button v-else @click="startCount">確認コードを送信</button>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、ref、reactive} をインポートします。

定数userCountDown = () => {
 定数カウント = ref(0)
 const countDown = (num: 数値) => {
  count.value = 数値
  番号--
  （数値＞0）の場合{
   タイムアウトを設定する(() => {
    countDown(数値)
   }, 1000)
  }
 }
 定数開始カウント = () => {
  // 検証コードを取得
  カウントダウン(60)
 }

 戻り値: { count, startCount }
}

エクスポートデフォルトdefineComponent({
 名前: 'ホーム'、
 設定 （） {
  const { count, startCount } = userCountDown()
  戻り値: { count, startCount }
 }
});
</スクリプト>

3. TypeScript のサポートが強化されました。 vue プロトタイプに多くのコンテンツを追加するわけではありませんが、これを導入することで型の定義がより明確になります。

設定

セットアップは Vue によって追加された新しいオプションであり、コンポーネントで Composition API を使用するためのエントリポイントです。 Vue コンポーネントインスタンスを作成し、props の初期化を完了した後にセットアップが実行されます。オプション API が解析される前に setup が呼び出されるため、setup 内の this は options 内の this とはまったく異なります。混乱を避けるため、セットアップではこれを使用しないでください。同時に、セットアップによって返された値はテンプレートやその他のオプションで使用できます。デザインの観点から見ると、Vue はセットアップですべてを正式に完了します。セットアップの戻り値は、テンプレートテンプレートとメソッドを接続します。

参照、反応的

データが渡されなくなったため、応答性の高い方法でデータを作成およびリッスンするには、Vue によって公開される ref または reactive 関数が必要になります。 2つには違いがあります。ref は基本代入型のデータに使用され、reactive は参照型のデータに使用されます。

基本割り当てタイプの値は、setup メソッドの .value メソッドを使用して取得および変更する必要があります。代入型の値が返されると、データの二重結合が失われるためです。しかし、テンプレートでは直接アクセスが可能です。

<テンプレート>
 <div>{{count}}
  <button @click="changeCount">追加</button>
 </div>
 <div>生徒の名前は: {{student.name} です。}</div>
 <div>生徒の年齢は: {{student.age}} です
  <button @click="changeStudentAge(20)">追加</button>
 </div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、ref、reactive} をインポートします。

エクスポートデフォルトdefineComponent({
 名前: 'ホーム'、
 設定 （） {
  定数カウント = ref(0)
  定数変更カウント = () => {
   カウント値 = カウント値 + 1
  }
  const 学生 = リアクティブ({
   名前: 'ボブ'、
   年齢: 12
  })
  const changeStudentAge = (年齢: 数値) => {
   学生.年齢 = 年齢
  }
  戻る {
   カウント、
   変更回数、
   学生、
   学生年齢の変更
  }
 }
});
</スクリプト>

計算して見る

<テンプレート>
 <div>{{count}}</div>
 <div>{{doubleCount}}</div>
 <button @click="addCount">追加</button>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、ref、computed、watchEffect、watch } をインポートします。

エクスポートデフォルトdefineComponent({
 名前: 'アプリ'、
 設定 （） {
  定数カウント = ref(0)
  watch(count, () => { // 複数の場合は、[count, count1]を配列として渡す
   console.log('watch', count.value)
  })
  ウォッチエフェクト(() => {
   console.log('watchEffect', count.value)
  })
  定数addCount = () => {
   カウント値++
  }
  const doubleCount = 計算された(() => {
   count.value * 2 を返す
  })
  戻る {
   カウント、
   ダブルカウント、
   追加カウント
  }
 }
});
</スクリプト>

watch と watchEffect の違いは、watchEffect はすぐに実行され、実行中に読み取られた応答データが監視されることです。そして、watch は watch オブジェクトが変更された場合にのみ実行されます。