관련 페이지

Implements

Using

동작 순서

1. Vue 인스턴스 생성: main.js에서 new Vue()로 Vue 인스턴스를 생성하고 DOM에 마운트합니다.

import Vue from 'vue';
   import App from './App.vue';

   new Vue({
     render: h => h(App),  // App.vue 파일을 렌더링
   }).$mount('#app');      // 애플리케이션을 #app 요소에 마운트

2. 루트 컴포넌트 로딩: 루트 컴포넌트가 로드되고 렌더링됩니다.

new Vue({
     render: h => h(App),  // 루트 컴포넌트를 렌더링
   }).$mount('#app');

3. 템플릿 컴파일 및 가상 DOM 생성: 템플릿이 가상 DOM으로 변환되고, Vue가 데이터 바인딩을 설정합니다.

<template>
     <div>
       <h1>{{ message }}</h1>
     </div>
   </template>

4. 라이프사이클 훅 실행: 컴포넌트의 라이프사이클 훅이 실행되며, 데이터가 설정되고 DOM에 마운트됩니다.
5. beforeCreate(): Vue 인스턴스가 초기화되기 전에 호출됩니다. 아직 데이터나 이벤트가 설정되지 않은 상태입니다.
6. created(): 인스턴스가 생성된 후 호출되며, 데이터가 설정되고 리액티브 시스템이 작동하기 시작합니다.
7. beforeMount(): 가상 DOM이 실제 DOM에 마운트되기 직전에 호출됩니다.
8. mounted(): 가상 DOM이 실제 DOM에 마운트된 후 호출됩니다. 이 단계에서는 컴포넌트가 완전히 렌더링되어 화면에 표시됩니다.
9. 디렉티브 바인딩 및 양방향 데이터 바인딩: 디렉티브(v-model, v-bind 등)가 컴포넌트에 바인딩됩니다.
10. v-model: 사용자의 입력과 Vue 인스턴스의 데이터를 동기화합니다.
11. v-bind: 데이터 속성을 HTML 요소의 속성에 바인딩합니다.
12. v-if, v-for: 조건부 렌더링과 반복 렌더링을 제공합니다.

<template>
     <div>
       <input v-model="message" />
       <p>{{ message }}</p>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         message: 'Hello Vue!'
       };
     }
   };
   </script>

6. 가상 DOM과 실제 DOM 동기화: 데이터 변경 시 가상 DOM을 통해 실제 DOM에 변경

• 데이터가 변경되면, Vue는 가상 DOM을 업데이트하고, 변경된 부분을 **패치(patch)**하여 실제 DOM에 반영합니다. 이 방식은 전체 DOM을 다시 렌더링하지 않고 효율적으로 변경 사항만 적용합니다.

7. Vue Router 및 Vuex (선택 사항)
8. Vue Router:
   • Vue Router는 SPA(Single Page Application)에서 라우팅을 관리하는 역할을 합니다.
   • 애플리케이션이 로드되면, router-view 컴포넌트가 현재 경로에 맞는 컴포넌트를 렌더링합니다.

const router = new VueRouter({
        routes: [
          { path: '/home', component: HomeComponent },
          { path: '/about', component: AboutComponent }
        ]
      });

      new Vue({
        router,
        render: h => h(App)
      }).$mount('#app');

2. Vuex:

   – Vuex는 애플리케이션의 상태 관리를 담당하며, 중앙 집중화된 상태 저장소로 데이터를 관리합니다.
   – Vuex는 초기화 과정에서 상태를 설정하고, 컴포넌트에서 상태를 사용할 수 있도록 바인딩합니다.

   javascript
   
   
   Copy
   

   const store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
          increment(state) {
            state.count++;
          }
        }
      });
   
      new Vue({
        store,
        render: h => h(App)
      }).$mount('#app');

8. 데이터 변경 시 리렌더링

   Vue는 리액티브 시스템을 기반으로 동작하므로, 데이터가 변경될 때마다 해당 컴포넌트가 리렌더링됩니다. Vue는 가상 DOM과 실제 DOM을 비교하여 변경된 부분만 DOM에 적용하므로, 성능 저하를 최소화합니다.

9. 컴포넌트가 파괴될 때 (해제 단계)

   컴포넌트가 더 이상 필요하지 않거나, 다른 라우트로 이동할 때는 Vue의 해제 단계가 실행됩니다.

• beforeDestroy(): 컴포넌트가 파괴되기 전에 호출됩니다.
• destroyed(): 컴포넌트가 파괴된 후 호출되며, 모든 이벤트 리스너나 데이터 바인딩이 해제됩니다.

Option Properties

• 예제:
• Data Options:

  – data
  – props
  – computed
  – methods

• State Management:

  – setup
  – provide
  – inject

• Lifecycle Hooks:

  – beforeCreate
  – created
  – beforeMount
  – mounted
  – beforeUpdate
  – updated
  – beforeUnmount (Vue 3)
  – unmounted (Vue 3)
  – activated
  – deactivated
  – errorCaptured

• Rendering Options:

  – render
  – renderTracked
  – renderTriggered

• Watchers:

  – watch

• Directives and Components:

  – directives
  – components
  – mixins
  – extends

• Template-related Options:

  – template
  – delimiters

• Other Options:

  – name
  – inheritAttrs
  – emits
  – model
  – filters (deprecated in Vue 3)

라이프사이클 훅

created() VS mounted()

기타 옵션

computed vs watch

• computed를 사용하는 경우:
• 복잡한 계산된 값이 필요하고, 해당 값이 캐싱되길 원할 때.
• 예를 들어, 여러 데이터 간의 연산이 필요하지만, 매번 새로 계산할 필요가 없고 데이터가 변할 때만 업데이트가 필요할 때.
• watch를 사용하는 경우:
• 특정 데이터가 변경될 때 실행해야 할 부수적 작업이 있을 때.
• 데이터 변경에 따라 비동기 작업이나, API 호출과 같은 작업을 실행해야 할 때.
• 실시간으로 데이터의 변화를 추적하고 즉각적인 반응이 필요할 때.

• computed가 먼저 실행됩니다.
• computed 속성은 종속된 데이터가 변경되면 즉시 다시 계산되며, 이 과정에서 Vue의 반응형 시스템은 데이터를 추적합니다. 만약 캐시된 computed 값이 더 이상 유효하지 않다면, 먼저 이 값이 재계산됩니다.
• watch는 computed 이후에 실행됩니다.
• watch는 데이터가 변경된 후에 부수적인 작업을 실행하는 훅입니다. Vue는 데이터 변경을 감지한 후, 변화가 완료되면 watch를 실행하여 필요한 부수 작업을 수행합니다.

인스턴스 프라퍼티

• 예제:
• $data: 컴포넌트의 반응형 데이터 객체에 접근.
• $props: 부모 컴포넌트에서 전달된 \*\*속성(props)\*\*에 접근.
• $el: 컴포넌트가 마운트된 DOM 요소에 접근.
• $refs: 컴포넌트 내의 특정 DOM 요소나 자식 컴포넌트에 접근.
• $emit: 자식 컴포넌트에서 이벤트를 방출.
• $nextTick: DOM 업데이트 후 다음 렌더링 사이클에서 콜백 실행.
• $watch: 특정 데이터 속성의 변화를 감지하고 콜백 실행.
• $on, $off, $once: 이벤트 핸들러 등록 및 해제.
• $parent: 부모 컴포넌트에 접근.
• $children: 자식 컴포넌트에 접근.
• $slots: 슬롯 콘텐츠에 접근.
• $store: Vuex 스토어에 접근 (Vuex 사용 시).
• $router: Vue Router에 접근 (Vue Router 사용 시).
• $route: 현재 라우트 정보에 접근 (Vue Router 사용 시).