Vue.js

Vue.js 학습한 내용을 키워드 단위로 정리

---

MVVM (Model - View - ViewModel)

양방향 데이터 바인딩 (Two-way Data Binding)

• 화면에 표시되는 값과 프레임워크의 모델 데이터가 동시에 변경됨
• Angular

단방향 데이터 바인딩 (One-way Data Binding)

• 항상 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달
• React

인스턴스 유효 범위

• el 속성과 밀접한 관계

라이프 사이클 Hook

• 각 라이프 사이클 속성에서 실행되는 커스텀 로직

이벤트 및 라이프 사이클 초기화

@ beforeCreate
화면에 반응성 주입
@ created
el, template 속성 확인
template 속성 내용을 render()로 변환
@ beforeMount
$el 생성 후 el 속성 값 대입
@ mounted
인스턴스의 데이터 변경
@ beforeUpdate
화면 재렌더링 및 데이터 갱신
@ updated
인스턴스 접근 가능
@ beforeDestory
컴포넌트, 인스턴스, 디렉티브 등 해제
@ destroyed

• 데이터를 갱신하는 로직은 되도록이면 beforeUpdate에 추가
• updated에는 변경 데이터의 화면 요소와 관련된 로직 추가

전역 컴포넌트 등록

• component() 메서드 사용
• Vue.component('컴포넌트 이름', {});

지역 컴포넌트 등록

• Vue 인스턴스에 components 속성 사용
• components: {'컴포넌트 이름': 내용}

컴포넌트 간 통신

• 컴포넌트를 등록함과 동시에 Vue 인스턴스 자체가 상위 컴포넌트가 됨
• 그러므로 상위 컴포넌트가 존재하는 것처럼 하위 컴포넌트로 props를 보냄

하위 -> 상위 컴포넌트 통신

• 이벤트 발생
  - this.$emit('이벤트명')
  - <child-component v-on:이벤트명="상위 컴포넌트의 메서드명">

같은 레벨 컴포넌트 통신: 이벤트 버스

• 이벤트 버스를 위한 추가 인스턴스 생성
  - let eventBus = new Vue()
  - 이벤트를 보내는 컴포넌트에서는 .$emit() 구현
  • 이벤트를 받는 컴포넌트에서는 .$on() 구현

데이터가 바뀌어도 값은 그대로 유지하고 싶다면

• v-once 디렉티브 사용
• <div id="app" v-once> {{ message }} </div>

v-bind

• HTML 속성 값에 Vue 인스턴스에 선언한 데이터 연결을 해주기 위한 디렉티브
• id, class, style, href 등

템플릿 태그 안에 if, for 등 제어문 사용 불가

• 삼항 연산자로 사용해야 함

v-if와 v-show

• v-if는 해당 HTML 태그를 완전히 삭제하지만
• v-show는 해당 HTML 태그를 삭제하는 것이 아닌 display: none; 처리를 함

computed 속성

• 데이터 연산을 정의하는 영역
• data 속성 값의 변화에 따라 자동으로 재연산
• 매번 재연산을 하지 않고, 캐싱 처리를 한 다음 연산된 데이터를 필요한 곳에 바로 가져다 쓸 수 있음

methods와 computed

• methods 속성은 오직 호출할 때만 로직을 수행
• computed 속성은 데이터가 변경될 때마다 자동으로 로직을 수행

computed와 watch

• 두 속성 모두 데이터의 변화를 감지하고 있다가 특정 로직을 수행
• computed는 자바스크립트의 내장 함수를 이용한 간단한 연산이 적합
• watch는 비동기 호출 등 시간이 더 소요되는 작업에 적합

vue-cli

• vue init webpack
• vue init webpack-simple
• vue init browserify
• vue init browserify-simple
• vue init simple
• vue init pwa

참고 문서

Do it! Vue.js 입문 (이지스퍼블리싱)