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 の値を渡す必要があります。

<my-component name="John" age="25"></my-component>

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

関数は、コンポーネント データの変更を監視するために使用されます。特定のデータを監視し、データが変化したときに対応する機能を実行できます。 watch()この関数は 2 つのパラメータを受け取ることができます。最初のパラメータは監視するデータであり、2 番目のパラメータはデータが変化したときに実行される関数です。以下は、watch() 関数の使用例です。 <pre class='brush:javascript;toolbar:false;'>import { watch } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); watch(() =&gt; state.count, (newVal, oldVal) =&gt; { console.log(`New Value: ${newVal}, Old Value: ${oldVal}`); }); return { state } } }</pre> ここでは、Vue3 の

watch

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

computed

computed

関数は、計算プロパティ用の新しい API です。 Vue3 では、

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

関数は Vue3 の新しい API で、リアクティブ参照を作成するために使用されます。 Vue3 では、

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

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count
    }
  }
}

ここでは、count

変数をリアクティブ参照にラップします。これは、変更するとき # When ##count

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

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

ref()

関数を使用してリアクティブ参照を作成する場合、構造化を通じてその値を直接取得することはできません。この時点で、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 サイトの他の関連記事を参照してください。