Vue.js 기초 익히기 (2)
===

###### tags: `지호`, `Vue.js 기초 익히기`

---

## 1. computed 속성

### computed
- 템플릿 내에 표현식을 넣으면 편리하지만 간단한 연산일 때만 이용하는 것이 좋고 많은 연산이 들어가면 유지보수가 어렵다
- 그래서 쓰는 것이 Computed 속성

### computed vs method
- computed는 캐싱을 하고 method는 하지 않는다
- 처음에 한 번만 계산되고 그 이후로 저장된 값을 계속 사용 (getter의 특성)
- ==반응형 getter==: data안에 값이 변경되면 그에 맞게 다시 계산하고 저장


<br/>

## 2. watch 속성

### watch
- 대부분의 경우에는 computed 속성이 더 적합하지만 watch가 꼭 필요한 상황이 있음
- 뷰 인스턴스의 특정 프로퍼티가 변경될 때 지정한 콜백함수가 실행되는 기능
- getter처럼 아무 프로퍼티도 생성하지 않고 단순히 콜백함수로의 역할을 한다.


<br/>

## 3. 클래스와 스타일 바인딩

### 클래스 바인딩


그 외 방법들: https://kr.vuejs.org/v2/guide/class-and-style.html#HTML-%ED%81%B4%EB%9E%98%EC%8A%A4-%EB%B0%94%EC%9D%B8%EB%94%A9%ED%95%98%EA%B8%B0

### 스타일 바인딩


그 외 방법들: https://kr.vuejs.org/v2/guide/class-and-style.html#%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EB%B0%94%EC%9D%B8%EB%94%A9

<br/>

## 4. 조건부 렌더링

### v-if
- 조건에 따라 블록을 렌더링하기 위해 사용


<br/>

- 조건부 그룹


- template: 보이지 않는 래퍼 역할
- v-else: v-if, v-else-if 바로 뒤에 있어야 한다.

- v-else-if
- v-if, v-else-if 바로 뒤에 있어야 한다.

<br/>

### v-show


### v-if vs v-showw
- v-if
- if 조건문이 false이면 아예 렌더링하지 않음
- 토글 비용이 높음
- 자주 조건값이 자주 바뀔 때 사용
- v-show는
- if 조건문이 false이면 렌더링은 하지만 style:none;으로 보이게 하지 않음
- 초기 렌더링 비용이 높음
- 런타임 시 조건이 바뀌지 않을 때 사용

<br/>

## 5. 리스트 렌더링

### v-for
- 배열을 기반으로 리스트 렌더링 가능


- v-for의 각 항목들에 고유한 key속성을 제공해야한다.
- 각 항목을 식별할 수 있는 고유한 id
- key에 index를 넣으면 좋지 않음
- 리스트의 원소가 추가/삭제됨에 따라 인덱스가 바뀌고 index도 바뀌기 때문
- id가 있으면 id를 사용하는 것이 좋고, 없다면 다른 속성들의 값을 합쳐서 사용하기
- 객체 사용: https://kr.vuejs.org/v2/guide/list.html#v-for%EC%99%80-%EA%B0%9D%EC%B2%B4

<br/>