Vue.js란..?
🤔 Vue.js란..?
MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
- MVVM 패턴을 사용
- Virtual DOM 사용
- React, Angular에 비해 매우 작고 가벼우며 복잡도가 낮음.
- Template와 Componenet를 사용하여 재사용이 가능한 사용자 인터페이스를 View Layer를 정리하여 사용
😎 Vue.js를 배워야 하는 이유
- Angular의
data binding
특성과 react의virtual dom
기반 렌더링 특징을 모두 가지고 있다. - 문법이 간편하고 작성하기 쉽다.
- react와 angular에 비해 성능이 우수하고 빠르다.
- react의 장점과 angular의 장점을 가지고 있다.
MVVM 패턴..?
Model - View - ViewModel
의 줄임말로 백엔드 로직과 UI의 분리를 위해 설계된 패턴
View
역할 === DOM
Model
역할 === JavaScript
ViewModel
역할 === 데이터가 변경될 때마다 즉시 뷰에 반영
ViewModel
이 없는 경우에는 직접Model
과View
를 연결해야 한다.
*ButViewModel
이 중간에서 연결해 주는 것이MVVM
모델
Reactivity(반응성)
Vue 인스턴스에 JavaScript 객체를 data
옵션으로 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setters로 변환한다. 이는 Vue가 ES5를 사용할수 없는 IE8 이하를 지원하지 않는 이유이다.
- 변환된 데이터 객체가 기록될 때 브라우저가 getter/setter 형식을 다르게 처리하므로 친숙한 인터페이스를 사용하기 위해 vue-devtools를 설치하는 것이 좋다.
모든 컴포넌트 인스턴스에 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 수정된 모든 속성을 기록한다.
나중에 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링된다.
뷰 인스턴스
인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다.
인스턴스 생성
인스턴스는 아래와 같이 생성할 수 있다.
new Vue();
인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인 가능
const vm = new Vue();
console.log(vm);
- 생성자 함수를 사용해서 Vue 객체를 생성하는 이유는 Vue객체의 프로토타입에 미리 필요한 프로퍼티나 메서드를 구현함으로써 Vue 생성자 함수로 만들어낸 모든 인스턴스들이 공유하여 사용할수 있도록 하기 위함
인스턴스 속성과 API
인스턴스에서 사용할 수 있는 속성과 API
new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch: ,
});
- el: 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
- template: 화면에 표시할 요소 (HTML, CSS 등)
- data: 뷰의 반응성(Reactivity)가 반영된 데이터 속성
- methods: 화면의 동작과 이벤트 로직을 제어하는 메서드
- created: 뷰의 라이프 사이클과 관련된 속성
- watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
Life Cycle..?
- Vue 인스턴스 또는 컴포넌트가 생성되고 해체하기까지의 과정
- 크게 생성(CREATE) -> DOM에 부착(MOUNT) -> 업데이트(UPDATE) -> 해체(DESTROY) 4가지 과정이 있다.
Life Cycle 단계
1. beforeCreate
- Vue 인스턴스가 초기화 된 직후에 발생
- 컴포넌트가 DOM에 추가되기 전이라
this.$el
접근 불가 - 또한
data, methods
등에도 접근 불가
2. created
data
를 반응형으로 추적 가능computed
,methods
,watch
등이 활성화되어 접근이 가능함- DOM에는 추가되지 않은 상태
3. beforeMount
- DOM에 부착되기 직전에 호출됨
- Virtual DOM이 생성되어 있으나 실제 DOM에 부착되지 않은 상태
4. mounted
- Virtual DOM의 내용이 실제 DOM에 부착되고 난 이후 실행됨
- 모든 요소에 접근 가능
5. beforeUpdate
- 컴포넌트에서 사용되는
data
값의 변화 직전에 호출 - 변화 값을 이용해 Virtual DOM을 렌더링 하기 전
- 이 단계에서 값들을 추가적으로 변화시키더라도 렌더링을 추가로 호출하지 않는다.
6. updated
- Virtual DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출
- 변경된
data
가 DOM에도 적용된 상태 - 이 단계에서
data
를 변경하는 것은 무한 루프를 일으킬수 있어 절대 금물
7. beforeDestroy
- 해당 인스턴스가 해체되기 직전에 호출됨
- 해체되기 이전이므로 모든 요소에 접근 가능
- 인스턴스가 사라지기 전에 해야할 일들을 이 단계에서 처리
8. destroyed
- 인스턴스가 해체되고 난 직후에 호출
- 인스턴스의 속성 & 요소에 접근 불가
- 하위 Vue 인스턴스 역시 삭제됨
부모 자식 컴포넌트 단계 순서
1. (parent) beforeCreate
2. (parent) created
3. (parent) beforeount
4. (child) beforeCreate
5. (child) created
6. (child) beforeMount
7. (child) mounted
8. (parent) mounted
Author And Source
이 문제에 관하여(Vue.js란..?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jtwjs/Vue.js란저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)