ホームページ  >  記事  >  ウェブフロントエンド  >  Vue3+TS+Vite 開発のヒント: Vue3 コンポジション API をエレガントに使用する方法

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

PHPz
PHPzオリジナル
2023-09-09 15:40:491276ブラウズ

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 の使用方法を示す簡単な例です。


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


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

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

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


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

<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>

  1. この簡単な例では、次のことができます。 「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 を通じてアクセスして変更します。


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

npm run dev

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


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

import { reactive } from 'vue';

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

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。