1. 인스턴스와 라이프 사이클

어플리케이션 & 컴포넌트 인스턴스 | Vue.js

• RootComponent : 어플리케이션을 mount할 때, 렌더링의 시작점으로 사용 ( App.vue)
• created : 인스턴스가 생성된 직후에 코드를 실행. (HTML 생성 전)
• mounted : 실제로 화면에 내용이 그려진(rendering) 직후에 확인.

라이프사이클 다이어그램

https://v3.ko.vuejs.org/images/lifecycle.svg

2. 템플릿 문법

템플릿 문법 | Vue.js

v-once 디렉티브

• 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행할 수 있습니다.

v-html 디렉티브

• 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 합니다

<p>이중 중괄호 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

v-bind

• Mustaches(이중 중괄호 구문)는 HTML 속성에 사용할 수 없습니다. 대신 v-bind 디렉티브를 사용하세요.

<div v-bind:id="dynamicId"></div>

// v-bind 약어
<div :id="dynamicId"></div>

// v-on 약어
<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a @[event]="doSomething"> ... </a>

[템플릿 문법 | Vue.js](https://v3.ko.vuejs.org/guide/template-syntax.html#v-bind-%E1%84%8B%E1%85%A3%E1%86%A8%E1%84%8B%E1%85%A5)

3. Computed

computed: { // 계산된 데이터
    hasFruit() {
      return this.fruits.length > 0
    },
    reverseFruits() { // map 함수, split , reverse 메소드
      return this.fruits.map(fruit => {
        return fruit.split('').reverse().join('')
      })
    }
  }

4. Computed 캐싱

캐싱

• computed에 한번 계산된 데이터는 캐싱이라는 기능으로 가져다가 사용할 수 있음
• 반복적인 함수 호출과 계산을 줄여줌.

5. Getter, Setter

Vuex(Store, 중앙 집중식 저장소)

Getter , Setter

• computed는 읽기 전용이기 때문에 수정하려면 get(), set() 함수를 넣어주어야 함.

6. Watch

데이터들의 변경사항을 감시하는 용도, 감시되고 있다가 변경사항이 있으면 발동!