基礎ゼロから始める Vue3 関数: Vue3 のコアメソッドを素早くマスターする-Vue.js-php.cn

フロントエンドテクノロジの継続的な開発により、Vue.js は非常に人気のあるフロントエンドフレームワークになりました。 Vue.js の最新バージョンである Vue 3 では、新しい機能とメソッドが導入され、既存の機能とメソッドがアップグレードされました。この記事では、読者が Vue 3 フレームワークをすぐに使い始められるように、Vue 3 のいくつかのコア機能とメソッドを紹介します。

createApp

Vue 3 では、createApp 関数を使用して Vue インスタンスを作成します。 createApp 関数は、アプリケーションオプションを含むオブジェクトである 1 つのパラメーターを受け取ります。 createApp 関数を使用して Vue インスタンスを作成するサンプルコードは次のとおりです。

const app = Vue.createApp({ data() { return { message: 'Hello Vue 3!' } } }) app.mount('#app')

ログイン後にコピー

上記のコードでは、データオブジェクト data を使用してメッセージ変数を宣言し、createApp 関数を使用してメッセージ変数を作成します。 Vue インスタンス。最後に、mount 関数を使用して、ID app を持つ要素に Vue インスタンスをマウントします。

reactive

Vue 3 では、reactive 関数を使用して JavaScript オブジェクトをリアクティブオブジェクトに変換できます。リアクティブオブジェクトを使用すると、オブジェクトの変更を簡単に監視し、オブジェクトのプロパティが変更されたときにビューを自動的に更新できます。 reactive 関数を使用してレスポンシブオブジェクトを作成するサンプルコードは次のとおりです。

const obj = { count: 0 } const reactiveObj = Vue.reactive(obj) console.log(reactiveObj.count) // 输出0 reactiveObj.count++ console.log(reactiveObj.count) // 输出1

ログイン後にコピー

上記のコードでは、reactive 関数を使用して JavaScript オブジェクト obj をレスポンシブオブジェクト reactiveObj に変換します。次に、reactiveObj の count プロパティを出力することで、リアクティブオブジェクトが適切に動作していることを確認できます。

computed

Vue 3 では、計算関数を使用して計算プロパティを作成できます。計算プロパティは、他のプロパティの値に依存するプロパティであり、その値は他の値に基づいて計算されます。計算関数を使用して計算プロパティを作成するサンプルコードは次のとおりです。

const reactiveObj = Vue.reactive({ count: 0 }) const computedVal = Vue.computed(() => { return reactiveObj.count * 2 }) console.log(computedVal.value) // 输出0 reactiveObj.count++ console.log(computedVal.value) // 输出2

ログイン後にコピー

上記のコードでは、値が reactiveObj.count の 2 倍である計算プロパティ computedVal を定義します。 reactiveObj.count の値が変更されると、computedVal の値が自動的に更新されます。

watch

Vue 3 では、watch 関数を使用して Vue インスタンス内のデータを監視できます。データが変更された場合、特定のアクションを実行できます。 watch 関数を使用して Vue インスタンス内のデータを監視するサンプルコードは次のとおりです。

const reactiveObj = Vue.reactive({ count: 0 }) Vue.watch(() => { return reactiveObj.count }, (newVal, oldVal) => { console.log(`count变化了：${oldVal} -> ${newVal}`) }) reactiveObj.count++ // 输出"count变化了：0 -> 1"

ログイン後にコピー

上記のコードでは、reactiveObj.count の変更を監視するための watch 関数を定義します。 reactiveObj.count の値が変化すると、監視関数は対応するコールバック関数を実行します。

provide と inject

Vue 3 では、provide 関数と inject 関数を使用してコンポーネント間の依存関係注入を実装できます。 Provide 関数と inject 関数を使用すると、親コンポーネントは props やイベントを介さずにデータを子コンポーネントに渡すことができます。 Provide 関数と Inject 関数を使用した依存関係注入のサンプルコードは次のとおりです。

const theme = Vue.reactive({ color: 'red' }) const ThemeProvider = { provide: { theme }, template: `   
 ` } const ThemeConsumer = { inject: ['theme'], template: `   
 ` } const app = Vue.createApp({ components: { ThemeProvider, ThemeConsumer } }) app.mount('#app')

ログイン後にコピー

上記のコードでは、ThemeProvider コンポーネントと ThemeConsumer コンポーネントを定義します。 ThemeProvider コンポーネントは、provide 関数を使用してテーマデータをサブコンポーネント ThemeConsumer に提供します。 ThemeConsumer コンポーネントは、inject 関数を使用して、親コンポーネント ThemeProvider からテーマデータを取得します。最後に、ThemeProvider コンポーネントと ThemeConsumer コンポーネントを Vue インスタンスに登録します。

概要

上記は、Vue 3 の 5 つの主要な機能とメソッドです。これらのコア機能とメソッドを学ぶことで、Vue 3 のフレームワーク構造と機能的特徴をより深く理解することができます。同時に、Vue 3 をより効果的に使用して、効率的で安定した柔軟なフロントエンドアプリケーションを構築することもできます。

以上が基礎ゼロから始める Vue3 関数: Vue3 のコアメソッドを素早くマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。