VUE3 기본 튜토리얼: 공통 기능 구현

Vue3은 최근 출시된 Vue.js의 최신 버전입니다. Vue3은 새로운 반응형 시스템, 더 나은 유형 지원, 성능 개선 등 많은 새로운 기능과 최적화를 제공하여 더욱 효율적이고 사용하기 쉽게 만듭니다.

이 글에서는 Vue3에서 공통 기능을 구현하기 위한 기본 튜토리얼을 소개합니다. 다음은 세 가지 기본 기능의 구현입니다.

1. 반응형 데이터

Vue3는 반응형 시스템을 재설계하고 프록시 객체를 사용하여 반응형 데이터를 구현합니다. Vue2의 DefineProperty와 비교하여 Proxy는 객체의 속성 액세스를 재귀적으로 가로챌 수 있으며 배열, 속성의 동적 추가/제거 및 비열거 속성을 더 잘 지원할 수 있습니다.

Vue3에서는 createApp 함수를 통해 Vue 인스턴스를 생성하고 반응형 메서드를 사용하여 데이터를 반응형 데이터로 변환할 수 있습니다.

코드 샘플:

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의 컴포넌트 개발도 개선되었으며 더 많은 기능을 제공합니다. 구성 요소는 상위 구성 요소의 속성과 메서드를 명시적으로 참조할 수 있으며 설정 기능을 사용하여 구성 요소의 데이터와 메서드를 정의할 수 있습니다.

코드 샘플:

<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 라우터는 단일 페이지 애플리케이션에서 라우팅을 관리하는 데 사용되는 Vue에서 가장 일반적으로 사용되는 타사 라이브러리 중 하나입니다. 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은 개발을 보다 효율적이고 사용하기 쉽게 만드는 많은 새로운 기능과 개선 사항을 제공합니다. 이 기사에서는 개발 효율성과 사용자 경험을 향상시키기 위해 실제 프로젝트에서 조합하여 사용할 수 있는 세 가지 기본 기능의 구현을 소개합니다.

위 내용은 VUE3 기본 튜토리얼: 공통 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!