Vue3の機能を詳しく解説：Vue3開発をすぐに始められる

Vue3 は Vue フレームワークの最新バージョンで、Vue2 と比較して、パフォーマンス、API、TypeScript サポートなどが大幅に向上しています。そのため、フロントエンド開発では Vue3 が注目を集めています。フロントエンド開発者として Vue3 の開発スキルを習得したい場合は、Vue3 の機能を理解し、習得する必要があります。この記事では、すぐに Vue3 開発を始められるように、Vue3 の共通機能を紹介します。

1. createApp

createApp()は、Vue3.0 で導入された新しい関数です。この関数の機能は、Vue アプリケーション インスタンスを作成し、そのインスタンスを返すことです。createApp()この関数は、コンポーネント、テンプレート、構成オブジェクトを受け取り、Vue アプリケーションを定義できます。

import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app');

2. mount

mount()関数は、アプリケーション インスタンスを DOM 要素にマウントするために使用されます。 Vue3 では、mount()メソッドを使用してアプリケーション インスタンスを要素にバインドできます。 DOM 要素がページにマウントされると、アプリケーションはレンダリングを開始できます。

app.mount('#app');

ご覧のとおり、mount()関数は、アプリケーションによってバインドされる要素を定義する CSS セレクターまたは DOM 要素をパラメーターとして受け取ります。

3. props

props関数は、コンポーネント間でデータを渡すために使用されます。 Vue3 では、コンポーネントのプロパティがより明確かつ明確になりました。開発者は、propsオプションを使用してコンポーネントのプロパティとそのタイプを指定できます。以下は、propsオプションの使用例です。

export default { props: { name: String, age: Number } }

ご覧のとおり、次のprops値にname## を定義しました。コンポーネントオプション # およびage属性。つまり、このコンポーネントを使用するときは、プロパティを通じてnameとageの値を渡す必要があります。

4. setup

setup()関数は、コンポーネントの動作を定義するために使用される新しいコンポーネント API です。 Vue3 のsetup()関数は Vue2 のdata()関数に似ていますが、新しい構文と Vue3 の反応性システムをより柔軟に使用して、パフォーマンスを向上させることができます。以下は簡単な例です:

import { reactive } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); function increment() { state.count++; } return { state, increment } } }

setup()関数で Vue3 のreactive()関数を使用しています。 #stateオブジェクトはリアクティブ オブジェクトになります。このようにして、stateのプロパティを変更することができ、Vue は関連するビューを自動的に更新します。反応性に加えて、setup()関数で他の関数や変数を定義し、それらを親コンポーネントに返すこともできます。

watch

関数は、コンポーネント データの変更を監視するために使用されます。特定のデータを監視し、データが変化したときに対応する機能を実行できます。watch()この関数は 2 つのパラメータを受け取ることができます。最初のパラメータは監視するデータであり、2 番目のパラメータはデータが変化したときに実行される関数です。以下は、watch()関数の使用例です。

import { watch } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); watch(() => state.count, (newVal, oldVal) => { console.log(`New Value: ${newVal}, Old Value: ${oldVal}`); }); return { state } } }

関数を使用して、state.count## の変更を監視します。 # 。state.countが変化すると、watch()関数に渡されたコールバック関数が実行され、新旧の値のログ情報が出力されます。

computed

computed関数を使用して計算プロパティを定義できます。計算プロパティは、依存関係に基づいたリアクティブ プロパティであり、依存するデータが変更されると自動的に再計算されます。以下は、computed関数の使用例です。

import { computed } from 'vue'; export default { setup() { const state = reactive({ height: 180, weight: 75 }); const bmi = computed(() => state.weight / (state.height / 100) ** 2); return { state, bmi } } }

bmiを定義します。 in 返された結果は親コンポーネントに返されます。このようにして、計算されたプロパティの計算ロジックをコンポーネントの外に移動できます。state.heightとstate.weightの値が変更された場合、bmiの値を手動で再計算する必要はありません。Vue が自動的にこれを完了します。私たちに課せられた課題です。

ref()

ref()関数を使用して、任意の値をリアクティブ値にラップできます。ref()関数の使用例を次に示します。

import { ref } from 'vue'; export default { setup() { const count = ref(0); return { count } } }

の値に達すると、Vue は関連するビューを自動的に更新します。toRefs

8. toRefs()
関数は、Vue3 のもう 1 つの新しい API で、リアクティブな Reference オブジェクトを作成するために使用されます。 Vue3 では、

関数を使用してリアクティブ参照を作成する場合、構造化を通じてその値を直接取得することはできません。この時点で、Vue3 のtoRefs()関数を使用して応答参照オブジェクトをオブジェクトに変換し、構造化を通じてその値を直接取得できるようにします。以下は、toRefs()関数の使用例です。

import { reactive, toRefs } from 'vue'; export default { setup() { const state = reactive({ name: 'John', age: 25 }); return { ...toRefs(state) } } }

可以看到，我们使用Vue3的toRefs()函数将响应式对象state转换成了一个响应式引用对象，然后我们使用对象的解构语法来提取state的属性。

总结：

以上就是Vue3.0常用的函数，这些函数对于Vue3开发非常重要。学会这些函数，可以让你更好地了解Vue3的开发方式，更快地掌握Vue3的开发技能。希望本文对你学习Vue3有所帮助。

以上がVue3の機能を詳しく解説：Vue3開発をすぐに始められるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。