ホームページ > 記事 > ウェブフロントエンド > Vue3の機能を詳しく解説:Vue3開発をすぐに始められる
Vue3 は Vue フレームワークの最新バージョンで、Vue2 と比較して、パフォーマンス、API、TypeScript サポートなどが大幅に向上しています。そのため、フロントエンド開発では Vue3 が注目を集めています。フロントエンド開発者として Vue3 の開発スキルを習得したい場合は、Vue3 の機能を理解し、習得する必要があります。この記事では、すぐに Vue3 開発を始められるように、Vue3 の共通機能を紹介します。
createApp
createApp()
は、Vue3.0 で導入された新しい関数です。この関数の機能は、Vue アプリケーション インスタンスを作成し、そのインスタンスを返すことです。 createApp()
この関数は、コンポーネント、テンプレート、構成オブジェクトを受け取り、Vue アプリケーションを定義できます。
import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app');
mount
mount()
関数は、アプリケーション インスタンスを DOM 要素にマウントするために使用されます。 Vue3 では、mount()
メソッドを使用してアプリケーション インスタンスを要素にバインドできます。 DOM 要素がページにマウントされると、アプリケーションはレンダリングを開始できます。
app.mount('#app');
ご覧のとおり、mount()
関数は、アプリケーションによってバインドされる要素を定義する CSS セレクターまたは DOM 要素をパラメーターとして受け取ります。
props
props
関数は、コンポーネント間でデータを渡すために使用されます。 Vue3 では、コンポーネントのプロパティがより明確かつ明確になりました。開発者は、props
オプションを使用してコンポーネントのプロパティとそのタイプを指定できます。以下は、props
オプションの使用例です。
export default { props: { name: String, age: Number } }
ご覧のとおり、次の props
値に name## を定義しました。コンポーネントオプション # および
age 属性。つまり、このコンポーネントを使用するときは、プロパティを通じて
name と
age の値を渡す必要があります。
<my-component name="John" age="25"></my-component>
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()
この関数は 2 つのパラメータを受け取ることができます。最初のパラメータは監視するデータであり、2 番目のパラメータはデータが変化したときに実行される関数です。以下は、watch()
関数の使用例です。 <pre class='brush:javascript;toolbar:false;'>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
}
}
}</pre>
ここでは、Vue3 の
関数を使用して、state.count## の変更を監視します。 # 。
state.countが変化すると、
watch()関数に渡されたコールバック関数が実行され、新旧の値のログ情報が出力されます。
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 } } }
ここでは、Vue3 の
computed 関数を使用して、計算プロパティ bmi を定義します。 in 返された結果は親コンポーネントに返されます。このようにして、計算されたプロパティの計算ロジックをコンポーネントの外に移動できます。
state.height と
state.weight の値が変更された場合、
bmi の値を手動で再計算する必要はありません。Vue が自動的にこれを完了します。私たちに課せられた課題です。
ref() 関数を使用して、任意の値をリアクティブ値にラップできます。
ref() 関数の使用例を次に示します。
import { ref } from 'vue'; export default { setup() { const count = ref(0); return { count } } }
ここでは、
count 変数をリアクティブ参照にラップします。これは、変更するとき # When ##count の値に達すると、Vue は関連するビューを自動的に更新します。 toRefs
toRefs() 関数を使用してリアクティブ参照を作成する場合、構造化を通じてその値を直接取得することはできません。この時点で、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 サイトの他の関連記事を参照してください。