<aside> ✨ [학습 목적] React와 다른 javascript 프레임워크를 공부하기 위함이다.

</aside>

들어가기 전 주의 사항 ✅

• Vue는 데이터의 불변성을 보장하지 않는다

<aside> ❗ 리액트와의 가장 큰 차이는 이 부분일 것이다.

state가 불변성을 유지하지 않으므로, 데이터의 변환 및 접근성에 유용할 수 있으나 잘못 접근 시, 데이터 자체가 변해버리는 불상사를 낳을 수 있으니 주의하자! (아 그리고, 기존의 리액트 형태의 매서드 활용은 오히려 값을 불러올 수 없다)

</aside>

• Vue는 양-방향성의 프레임워크다.

<aside> ❗ 따라서, 데이터 바인딩 자체를 UI 구역에 할 필요 없이 바로 data 변수 자체에서 바인딩이 가능하다. (vue가 각광 받는 이유는 아마 이 부분이 가장 큰 요소가 아닐까 생각해본다)

</aside>

• Vue는 기본적으로 인스턴스를 부여한다.

<aside> ❗ Vue는 기본적으로 인스턴스를 생성하는 것을 특징으로 한다 따라서, data, methods 등에서 변수는 this.$el 형태로 작성해야 한다.

</aside>

기본 개념 정리

기본 개념 정리는 Vue의 동작원리와 연관지어서 나열하고자 한다.

1. Vue가 인스턴스로 생성 된다

2. Event와 Life-cycle이 시작 된다.

3. 초기화 및 시작(데이터 반응 reactive)

• 시작 전 beforeCreate를 사용해서 이벤트를 제어할 수 있다.
• 시작은 데이터의 라이프사이클 중 “Create()” 단계에 해당한다
• Create가 생성 되면, computed, methods, watch Hooks를 활성화 한다.

4. 엘리먼트(new Vue의 옵션)

• *vm(viewModel) : MVVM(Model–view–viewmodel)를 따르진 않지만 연관성이 있다고 함.
  • vm에는 옵션이 붙을 수 있음.
  • 이어서 template에도 옵션이 붙을 수 있음

5. Complie

• 렌더 함수 안으로 컴파일 템플릿을 컴파일링
• Template과 같은 outerHtml에서 엘리먼트 컴파일링
• 이 작업 직후, beforeMount 형태가 이뤄진다.

6. Mounted(호출)& update

• 컴파일링 이후에, 라이프사이클 2단계인 Mount 단계에 돌입한다.
• Mount 상태는 DOM을 부착하고 있기 때문에 This.$el와 data, computed 등등 Hooks와 데이터 엘리먼트에 접근이 가능해진다.
• *Vue 또한 VirtualDOM을 따르기 때문에, Mount시 데이터 상태가 변화된다면 (methods, computed로 인해) re-rendering 된다.

**** 리렌더링이 시, mounted가 재 호출 되는 것은 아님 주의!**

(이를 라이프사이클 3단계인 update라고 부른다)

• **주의 할 점은 update 부분에 data를 변경하는 것은 무한루프에 빠지게 할 수 있으니 주의하도록 하자.
  • 어짜피 마운트되면서 methods, computed가 호출되기 때문에 굳이 update 부분을 넣어줄 필요는 없음. 매서드에서 지속적으로 업데이트를 변화해줄 수 없는 경우를 제외하고는

7. Remove - EventListener

• 이벤트루프를 종료하게 되면서 라이프사이클 마지막 단계인 destory가 이뤄진다.