ホームページ > 記事 > ウェブフロントエンド > 基礎ゼロから始める Vue3 関数: Vue3 のコアメソッドを素早くマスターする
フロントエンド テクノロジの継続的な開発により、Vue.js は非常に人気のあるフロントエンド フレームワークになりました。 Vue.js の最新バージョンである Vue 3 では、新しい機能とメソッドが導入され、既存の機能とメソッドがアップグレードされました。この記事では、読者が Vue 3 フレームワークをすぐに使い始められるように、Vue 3 のいくつかのコア機能とメソッドを紹介します。
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 インスタンスをマウントします。
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 プロパティを出力することで、リアクティブ オブジェクトが適切に動作していることを確認できます。
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 の値が自動的に更新されます。
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 の値が変化すると、監視関数は対応するコールバック関数を実行します。
Vue 3 では、provide 関数と inject 関数を使用してコンポーネント間の依存関係注入を実装できます。 Provide 関数と inject 関数を使用すると、親コンポーネントは props やイベントを介さずにデータを子コンポーネントに渡すことができます。 Provide 関数と Inject 関数を使用した依存関係注入のサンプル コードは次のとおりです。
const theme = Vue.reactive({ color: 'red' }) const ThemeProvider = { provide: { theme }, template: ` <div> <slot></slot> </div> ` } const ThemeConsumer = { inject: ['theme'], template: ` <div :style="{ color: theme.color }"> <slot></slot> </div> ` } 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 サイトの他の関連記事を参照してください。