ホームページ > 記事 > ウェブフロントエンド > 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 の使用方法を示す簡単な例です。npm init vite@latest my-vite-project -- --template vue-ts
<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. 一般的に使用される Comboposition API 関数
reactive 関数は、通常のオブジェクトを応答性の高いオブジェクトに変換し、応答性の高いプロキシ オブジェクトを返すことができます。例は次のとおりです。
<template> <div> <HelloWorld /> </div> </template> <script> import HelloWorld from './HelloWorld.vue'; export default { components: { HelloWorld, }, }; </script>
npm run dev
import { reactive } from 'vue'; const state = reactive({ count: 0, }); console.log(state.count); // 输出:0 state.count++; console.log(state.count); // 输出:1
4. 概要
以上がVue3+TS+Vite 開発のヒント: Vue3 コンポジション API をエレガントに使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。