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

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

PHPz

リリース： 2023-09-09 15:40:49

オリジナル

1311 人が閲覧しました

Vue3+TS+Vite开发技巧：如何优雅地使用Vue3 Composition 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 の使用方法を示す簡単な例です。

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

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

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

ログイン後にコピー

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>

ログイン後にコピー

この簡単な例では、次のことができます。「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>

ログイン後にコピー

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

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

npm run dev

ログイン後にコピー

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

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

import { reactive } from 'vue';

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

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

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

ログイン後にコピー

上記の例では、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 サイトの他の関連記事を参照してください。