Vue3+TS+Vite 開発のヒント: Vue3 コンポジション API をエレガントに使用する方法

Vue3 TS Vite 開発スキル: Vue3 コンポジション API をエレガントに使用する方法

はじめに:
Vue3 のリリースにより、フロントエンドに一連の変更がもたらされました。最大の変更点の 1 つは、Composition API の導入です。従来のオプション API と比較して、コンポジション API を使用すると、コードをより柔軟かつ効率的に編成および管理できます。この記事では、Vue3 Comboposition API をエレガントに使用し、TypeScript と Vite を組み合わせてプロジェクト開発を行う方法を紹介します。

1. インストールと初期化プロジェクト
まず、最新バージョンの Vue CLI をインストールする必要があります。次のコマンドを使用してインストールします:

npm install -g @vue/cli

次に、Vue CLI を使用して次のことを行うことができます。新しいプロジェクトを作成します:

vue create my-project

プロジェクトを作成するとき、プロジェクトのテンプレートとして TypeScript を選択できます。選択肢がない場合は、TypeScript サポートを手動で追加することもできます:

vue add @vue/typescript

次に、プロジェクトのビルド ツールとして Vite を使用し、次のコマンドでインストールします。このようにして、Vue3 TS Vite プロジェクトのインストールと初期化に成功しました。

2. コンポジション API の使用

コンポジション API を使用すると、コードをより適切に整理し、開発効率を向上させることができます。以下は、Composition API の使用方法を示す簡単な例です。

新しいコンポーネントの作成
1. まず、HelloWorld.vue などの新しいコンポーネントを作成します。この例では、Composition API の ref 関数を使用して応答データ メッセージを定義し、コンポーネントのマウントされたフック関数でメッセージの値を変更します。

   
   

コンポーネントの使用

次に、このコンポーネントをページで使用します:

npm init vite@latest my-vite-project -- --template vue-ts

2. HelloWorld コンポーネントをページに導入し、使用します。サブコンポーネントとして。

   
   

プロジェクトを実行する

最後に、プロジェクトを実行して効果を確認します:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
 const message = ref('Hello, World!');

 onMounted(() => {
   setTimeout(() => {
     message.value = 'Hello, Vue3!';
   }, 2000);
 });

 return {
   message,
 };
  },
};
</script>

3. この簡単な例では、次のことができます。 「Composition API を使用すると、コードをより簡潔かつ明確に編成できる」を参照してください。

   
   3. 一般的に使用される Comboposition API 関数

   上で紹介した ref 関数と onMounted 関数に加えて、より良い開発に役立つ一般的に使用される Comboposition API 関数もいくつかあります。

reactive 関数

reactive 関数は、通常のオブジェクトを応答性の高いオブジェクトに変換し、応答性の高いプロキシ オブジェクトを返すことができます。例は次のとおりです。

<template>
  <div>
 <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue';

export default {
  components: {
 HelloWorld,
  },
};
</script>

1. 上記の例では、reactive 関数を使用して通常のオブジェクトの状態をリアクティブ オブジェクトに変換し、state.count を通じてアクセスして変更します。

   
   

watch 関数

watch 関数は、応答データの変化を監視し、データが変化したときに対応するコールバック関数を実行できます。例は次のとおりです。

npm run dev

2. 上記の例では、watch 関数を使用して count 変数の変化を監視し、カウントが変化したときに対応するログを出力します。

   
   

toRefs 関数

toRefs 関数は、応答オブジェクトのプロパティを通常の ref オブジェクトに変換し、新しいオブジェクトを返すことができます。例は次のとおりです。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

console.log(state.count); // 输出：0

state.count++;
console.log(state.count); // 输出：1

3. 上記の例では、toRefs 関数を使用して状態の count 属性を通常の ref オブジェクトに変換し、アクセスして変更できるようにします。 count.value を通じてそれを実行します。

   
   4. 概要

   Vue3 Comboposition API の導入により、コードがより柔軟かつ効率的になり、コードをより適切に整理および管理できるようになります。この記事では、Vue3 Comboposition API を使用し、TypeScript と Vite で Vue3 プロジェクトを開発する方法を紹介します。 Comboposition API の使用法を理解し、使いこなすことで、Vue3 プロジェクトをよりエレガントに開発し、開発効率を向上させることができます。

この記事が、Vue3 プロジェクト開発で Comboposition API を使用する際の助けとガイダンスになれば幸いです。プログラミングを楽しんでください。

以上がVue3+TS+Vite 開発のヒント: Vue3 コンポジション API をエレガントに使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。