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

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

1. 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 インスタンスをマウントします。

2. 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 プロパティを出力することで、リアクティブ オブジェクトが適切に動作していることを確認できます。

3. 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 の値が自動的に更新されます。

4. 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 の値が変化すると、監視関数は対応するコールバック関数を実行します。

5. provide と inject

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 サイトの他の関連記事を参照してください。