VUE3 基本チュートリアル: 共通機能の実装-Vue.js-php.cn

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

王林

リリース： 2023-06-16 08:16:49

オリジナル

1446 人が閲覧しました

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