VUE3 基本チュートリアル: 共通機能の実装

Vue3 は、最近リリースされた Vue.js の最新バージョンです。 Vue3 は、新しい応答性の高いシステム、より優れた型サポート、パフォーマンスの向上など、多くの新機能と最適化を提供し、より効率的で使いやすくなっています。

この記事では、Vue3 で一般的な機能を実装するための基本的なチュートリアルを紹介します。以下は 3 つの基本関数の実装です:

1. 応答データ

Vue3 は応答システムを再設計し、Proxy プロキシ オブジェクトを使用して応答データを実装します。 Vue2 の defineProperty と比較して、Proxy はオブジェクトのプロパティ アクセスを再帰的にインターセプトでき、配列、プロパティの動的な追加/削除、および非列挙プロパティをより適切にサポートできます。

Vue3 では、createApp 関数を通じて Vue インスタンスを作成し、reactive メソッドを使用してデータをレスポンシブ データに変換できます。

コード例:

import { createApp, reactive } from 'vue'

const state = reactive({
  message: 'Hello Vue3!'
})

const app = createApp({
  template: `<div>{{ state.message }}</div>`,
  data() {
    return {
      state
    }
  }
})

app.mount('#app')

2. コンポーネント開発

Vue3 でのコンポーネント開発も改善され、より多くの機能が提供されています。コンポーネントは、親コンポーネントのプロパティとメソッドを明示的に参照し、setup 関数を使用してコンポーネントのデータとメソッドを定義できます。

コード サンプル:

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Increment</button>
    <p>Current count is: {{ count }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  props: {
    title: String
  },
  setup(props) {
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    const displayCount = computed(() => {
      return `The count is currently ${count.value}`
    })
    
    return {
      count,
      increment,
      displayCount
    }
  }
}
</script>

3. ルーティング管理

Vue Router は、Vue で最も一般的に使用されるサードパーティ ライブラリの 1 つで、単一ページでルーティングを管理するために使用されます。アプリケーションです。 Vue3 では、Vue Router も改良され、Composition API に基づいたルーティング ガードの作成をサポートしています。

コード サンプル:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // check if user is authenticated
    if (!auth.isAuthenticated()) {
      next({
        name: 'login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

要約すると、Vue3 は、開発をより効率的で使いやすくする多くの新機能と改善を提供します。この記事では、開発効率とユーザーエクスペリエンスを向上させるために実際のプロジェクトで組み合わせて使用​​できる 3 つの基本機能の実装を紹介します。

以上がVUE3 基本チュートリアル: 共通機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。