[ Vue ] 001. Vue의 정의

소개

Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크입니다.
컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었으며,
재사용이 가능한 UI들을 묶어서 사용할 수 있습니다.

 

 

Mode - View - ViewModel의 줄임말으로 로직과 UI의 분리를 위해 설계된 패턴입니다.
웹페이지는 돔과 자바스크립트로 만들어지게 되는데 돔이 View 역할을 하고, 자바스크립트가 Model 역할을 합니다.
뷰모델이 없는 경우에는 직접 모델과 뷰를 연결해야 합니다.
그러나 뷰모델이 중간에서 연결해 주는 것이 MVVM 모델입니다.

 

가상돔(Virtual DOM)

돔 요소가 많아지면 자바스크립트로 돔을 핸들링하는 일이 무거워집니다. 그래서 돔과 비슷한 구조로 자바스크립트를 만듭니다. 이것은 진짜 돔과는 달리 메모리에 올라가있는 것이기 때문에 비교적 매우 빠른 성능을 보입니다. Vue js가 가상돔을 수정하면 돔을 수정하는 것보다 빠릅니다. vue는 가상돔이 변경될 때마다 진짜 돔과 비교해서 차이를 찾고 차이난 부분의 돔만 수정하는 동작을 하게 됩니다.

 

컴포넌트(Component)

화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것이 컴포넌트입니다.
Vue에서, 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스입니다.
전역 등록과 지역 등록 존재합니다.

 

Vue의 생명주기

• beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 data 또는 method 속성이 아직 인스턴스에 정의되지 않고 돔과 같은 화면 요소에도 접근할 수 없다.
• created : data속성과 method 속성이 정의 되었기 때믄에 이와 관련된 메소드를 실행할 수 있으나 template 속성이 정의되기 전이므로 돔 요소엔 접근할 수 없다. 가장 첫 라이프 사이클 단계이고 컴포넌트가 생성된 후 실행되는 단계이므로 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음.
• beforeMount : javascript가 돔을 그리기 이전, render() 함수가 호출되기 직전의 로직을 추가하기 좋다.
• mounted: el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나서 호출되는 단계, template에서 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행할 수 있다.
• beforeUpdate: $watch를 통해 관찰중인 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정인 데이터의 값과 관련된 로직을 미리 넣을 수 있다.
• updated: 데이터가 변경되고 나서 가상돔으로 다시 화면을 그리고 실행되는 단계, 데이터 변경 후 화면요소와 제어와 관련된 로직을 추가하는 게 좋음. 데이터 값을 갱신하는 로직은 beforeUpdated에 추가하고 변경 데이터의 화면 요소와 관련된 로직을 updated에 추가하는 게 좋습니다.
• beforeDestroyed: 뷰 인스턴스의 데이터를 삭제하기 좋은 단계

Vue.js의 특징

1. MVVM 패턴을 사용(비즈니스 로직이나 백엔드 로직으로 분리 사용)
2. Vue.js는 컴포넌트 기반 프레임 워크이다.
3. 코드를 재사용하기 쉽고 코드를 직관적으로 파악할 수 있다.
4. 양방향 데이터 바인딩 (화면에 표시되는 값과 프레임 워크의 모델 데이터 값이 동기화 됨)
5. 데이터 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달함.

 

 

참고 : https://wikidocs.net/17701

위키독스

 참고: https://mber.tistory.com/12