Before coding in vue.js

UI 개발을 위한 Progressive Framework, vue.js

"Progressive" of vue.js

Web, 네이티브 앱(ios, android)의 이점을 모두 수용하여
표준적인 패턴으로 개발함.

제공하는 웹 사이트의 특징에 따라

개발 방식도 달라져야하기 때문.

데이터 지향

화면을 렌더링하는 구조 자체는 dom이 아니라 javascript다.

데이터가 먼저 존재하고
데이터를 기반으로 적절한 dom을 구축한다.

Two way 데이터 바인딩

데이터와 렌더링을 동기화하는 구조를 가진다.

UI 패턴이 많아지면 dom을 변경하는 코드가 많아진다.
vue에서는 dom 변경 작업을 vue 프레임워크에 맡긴다.

html dom과 데이터가 서로 양방향으로 연결되어 있어서

어느 한쪽에 변경이 일어나면, 다른 쪽에 자동으로 반영된다.

이를 통해 휴먼 에러와 코딩양 자체를 줄일 수 있다.

v-directive 속성

가상 dom을 만들기 위한 템플릿 기법.

Dom에 반영하기 전에
vue.js 프레임워크에 의해 컴파일 되고
내부적으로만 사용한다.

ex) v-if, v-bind, key

데이터 바인딩과 관련된 처리를 실시한다.

html속성과 다르게 v-디렉티브는

애플리케이션에 등록되어 있는 데이터 전용 객체의 속성을 나타낸다.

Mount

배치할 요소와 애플리케이션을 연결하는 것.

컴포넌트

기능별로 html/js/css 세트로 구성할 수 있다.

컴포넌트를 조합하면 페이지를 구조화하여 만들 수 있다.

vue.js를 통해 부품을 만들고
vuex를 통해 부품들로 구성된 페이지를 만들고
vue router를 통해 여러 개의 페이지를 관리한다.

가상dom

작은 변화가 발생 해도 DOM 트리 구조 모두 갱신하기보다,

추상화된 dom문서로부터 가상의 DOM에서 메모리에서 처리 후
실제 DOM과 동기화.(실제 DOM갱신)

1. 데이터 변경과 실제 dom변경 처리는 비동기적으로 이뤄진다.
    dom조작을 최소한으로 유지하므로 렌더링 성능이 높다.

2. 그러나 dom 재사용으로 인해 예측하지 못한 문제가 발생할 수 있음.

가상 dom은 바인딩한 데이터를 기반으로 만들어진다.

dom 노드와 마찬가지로 가상 노드(vnode)라고 부르는 노드로 이루어진 트리구조를 갖는다.

"가상 dom의 차이를 확인하는 알고리즘"

렌더링 처리 전에 가상dom트리에서 변경 대상을 확인하고,
변경 대상 노드에만 실제 dom노드의 추가/변경/제거 등의 dom조작을 실시한다.

"실제 dom에 반영되는 시점은?"

vue.js의 리액티브 시스템에 의해

다시 렌더링 처리가 이뤄지는 시점이다.
nextTick이 dom변경을 위해 제공된다.

vue.js 생태계

vue.js와 추가 라이브러리
1. vue.js (ecma의 연도별 사양을 따르는 버전을 사용)

2. vuex

3. vue router

4. vue cli

* vue dev tools for chrome

vue.js를 지원하는 리소스

[범용 ui]

1. awesome-vue

2. vue curated

3. element

4.onesen ui (하이브리드 모바일 애플리케이션 전용)