key를 통한 상태유지
- v-for로 렌더링된 리스트 업데이트 시 기본적으로 in-place patch 전략을 사용한다.
단순히 리스트 순서만 변경된 경우 DOM을 직접 다시 재조작하는 것이 아닌, 변경이 필요한 엘리멘트들을 제자리에서 패치해 렌더링 하도록한다.
in-place path 전략은 현재 Dom에서 바뀌어야 할 부분만 땜빵에서 처리하고 Dom을 재사용한다는 것이다.
즉 dom 트리 구조에 변경을 주지 않는다. ⇒ render tree 재구성→ reflow → refaint 과정을 거치치 않게 해준다는 의미이다.
이로써, dom을 최대한 조작안하게 해주는 전략으로 성능이 안좋아지는 부분을 예방할 수 있다는 것이다.
위 이유로 vue에서 각 노드의 ID를 추적하고 기존 엘리먼트를 재사용하고 재 정렬할 수 있도록 힌트를 제공하려면 각 항목에 대해 고유한 key를 제공하자!
배열의의 수정과 교체의 차이
반응형(ref,reactice 키워드로 감싸진) 데이터로 취급되면 변경 메소드가 호출시 이를 감지하여 필요한 업데이트를 발생시킨다.
그렇기 때문에 아래 반응형 데이터에서 감지되는 메소드와 감지되지 않는 메소드를 구분하고 사용해야 한다.
수정
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
교체
filter(), concat() 및 slice()주의사항
v-if , v-for를 함께 사용하지 권장하지 않는다.
<!-- "todo" 속성이 인스턴스에 정의되어 있지 않기 때문에 에러가 발생합니다. --> <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo.name }} </li> ----------- 권장 가이드 <template v-for="todo in todos"> <li v-if="!todo.isComplete"> {{ todo.name }} </li> </template>