공책

< Vue.js의 특징 >

1. 뷰의 단위를 쪼개서 재활용이 쉽다. (컴포넌트로 구성하여 사용)
2. 가볍고 빠르다.
3. 데이터 피드백이 빠르다.

  - 출력값과 모델값의 동기화
  - 필요한 부분만 빠르게 렌더링

= Vue.js는 View가 아니라 데이터를 조작한다는 개념으로 이해하면 쉽다.

< Vue js 로드 >

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

< Vue Instance Example>

var vm = new Vue({
    el: '#id값'
    data() { 
    	수정중
    },
    methods: {
    	printName: function() {
        console.log(this.data);
        }
})

< LifeCycle Hook >

라이프 사이클 : 인스턴스가 호출되고 사라지는 전체 과정

훅 : 각 라이프 사이클에서 실행되는 커스텀 로직

1. beforeCreate
: 인스턴스가 생성되고 나서 가장 처음으로 실행되는 단계
data속성/methods속성이 아직 인스턴스에 정의되지 않았으므로 DOM(화면요소)에 접근할 수 없다.

2. created
: data/methods 정의 > 로직 실행가능, 컴포넌트 생성
서버에 데이터를 요청해 받아오는 로직을 수행하기 적합한 단계

3. beforeMount
: 마크업 속성을 DOM에 부착하기 전 단계
render() 함수 호출 전이다.

4. mounted
: DOM에 인스턴스가 부착 되자마자 호출되는 단계
DOM에 접근가능, 화면요소를 제어하는 로직을 수행하기 좋은 단계

5. beforeUpdate
: 데이터가 변경되고 가상 돔으로 화면을 다시 그리기 전 단계
변경 예정인 데이터값에 접근가능하므로 그 값과 관련된 로직을 넣기 좋다.
* 값을 변경하는 로직을 넣더라도 화면이 다시 그려지진 않음

6. updated
: 데이터가 변경된 후, 가상돔으로 화면을 다시 그린 후 실행되는 단계
데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋다.
* 이 단계에서 값을 바꾸면 무한루프에 빠질 수 있으니, computed나 watch를 사용해야한다.
가급적 값을 바꾸는 로직은 beforeUpdate에 넣고, updated는 변경 데이터의 화면요소(DOM)과 관련된
로직을 추가하는 것이 좋다.

7. before Destroy
: 뷰 인스턴스가 파괴되기 직전 단계.
아직 인스턴스에 접근할 수 있으므로 인스턴스의 데이터를 삭제하기 좋다.

8. destroyed
: 인스턴스가 파괴되고 난 후 호출되는 단계.

< Vue Directive > 

: html태그 안에서 v-접두사를 가지는 속성들

v-bind : 데이터가 바뀌면 DOM에 반영이 된다. 단방향 (출력만 할때)
v-model : View에서 데이터가 바뀌면 둘다 바뀐다. 양방향 (v-bind + v-on:input)
v-on : View에서 일어난 이벤트를 처리하는 키

v-for : v-if 보다 우선 순위가 높다. for문

v-if : v-for보다 우선 순위가 낮다. if문

v-pre : 특정 Elements들을 무시, 컴파일 속도에 영향

* DOM에서는 케밥케이스나, 소문자로 입력해야 인식된다.

< computed, methods, watch >

computed : 선언형, 캐싱한다. 원본 객체의 값이 변하지 않으면 다시 연산하지 않는다.

methods : 렌더링 마다 연산한다.

watch : 명령형, 데이터를 주시하다가 값이 변경 될 때마다 연산한다.

참고문헌 : 

Vue.js '가이드 2.x' 

https://kr.vuejs.org/v2/guide/index.html

장기효 지음, 『Vue.js입문』, 이지스퍼블리싱(2018)