[Vue] 03)심화 문법

computed

• Vue instance가 가진 options 중 하나
• computed 객체에 정의한 함수를 페이지가 최초로 렌더링 될 때 호출하여 계산
  • 계산 결과가 변하기 전까지 함수를 재호출하는 것이 아닌 계산된 값을 반환
• 10_computed.html에서 methods와의 차이 확인

methods VS computed

• methods
  • 호출 될 때마다 함수를 실행
  • 같은 결과여도 매번 새롭게 계산
• computed
  • 함수의 종속 대상의 변화에 따라 계산 여부가 결정됨
  • 종속 대상이 변하지 않으면 항상 저장(캐싱)된 값을 반환

watch

• 특정 데이터의 변화를 감지하는 기능
  • watch 객체를 정의
  • 감시할 대상 data를 지정
  • data가 변할 시 실행할 함수를 정의
• 첫번째 인자는 변동 후 data
• 두번째 인자는 변동 전 data
• 실행 함수를 Vue method로 대체 가능
  • 감시 대상 data의 이름으로 객체 생성
  • 실행하고자하는 method를 handler에 문자열 형태로 할당
• Array, Object의 내부 요소 변경을 감지를 위해서는 deep 속성 추가 필요

filters

• 텍스트 형식화를 적용할 수 있는 필터
• interpolation 혹은 v-bind를 이용할 때 사용 가능
• 필터는 자바스크립트 표현식 마지막에 | (파이프)와 함께 추가되어야 함
• 이어서 사용(chaining) 가능

---

중요 스타일 가이드

• v-for는 항상 key와 함께 사용하기
• v-for를 쓴 엘리먼트에 v-if를 사용하지 말기

1. v-for는 항상 key와 함께 사용하기

• 내부 컴포넌트의 상태를 일관되게 유지하기 위해 v-for에 항상 key를 사용하기
• 데이터의 예측 가능한 행동을 유지 시키기(객체 불변성)

todos: [
	{ id: 1, text: 'learn to use v-for'},
	{ id: 2, text: 'learn to use key'}
]

<!-- bad -- >
<ul>
	<li v-for="todo in todos">
		{{ todo.text }}
	</li>
</ul>

<!-- good -->
<ul>
	<li v-for="todo in todos":key="todo.id">
		{{todo.text}}
	</li>
</ul>

---

2. v-for를 쓴 엘리먼트에 절대 v-if를 사용하지 말기

2-1) 목록의 항목을 필터링 할 때

• Vue가 디렉티브를 처리할 때 v-for는 v-if보다 우선순위가 높음
• 즉 user의 일부분만 렌더링하고 싶은데도 불구하고, v-for가 우선순위를 가지기 때문에 모든 user에 대해 반복해야함

computed: {
	activeUsers(){
		return this.users.filter((user)=>user.isActive)
	}
}

<!-- bad -->
<ul>
	<li 
		v-for="user in users"
		v-if="user.isActive"
		:key="user.id"
	>
		{{ user.name }}
	</li>
</ul>

<!-- good -->
<ul>
	<li
		v-for="user in activeUsers"
		:key="user.id"
	>
		{{ user.name }}
	</li>
</ul>

2-2) 숨김 목록의 렌더링을 피할 때

• v-if를 컨테이너 엘리먼트로 옮기기
  • 더 이상 목록의 모든 사용자에 대해 shouldShowUsers를 확인하지 않도록 함
• 한번 확인하고 shouldShowUsers가 false인 경우 v-for를 평가하지도 않음

<!-- bad -->
<ul>
	<li
		v-for="user in users"
		v-if="shouldShowUsers"
		:key="user.id"
	>
		{{ user.name }}
	</li>
</ul>

<!-- good -->
<ul v-if="shouldShowUsers">
	<li
		v-for="user in users"
		:key="user.id"
	>
		{{ user.name }}
	</li>
</ul>