https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key List Rendering | Vue.js vuejs.org Vue에서는 v-for를 사용할 경우 key 속성을 바인딩하도록 가이드 되어있다. key속성을 바인딩 하는 이유에 대해 랜더링과 관련하여 알아보자. [in place patch 전략] VUE는 메모리를 최적하 하기위해 DOM을 재사용한다. DOM이 바뀌어야할 부분만 처리하고 DOM을 재사용한다. DOM 재사용 측면에서는 우수하나 문제을 일으킨다. [이슈 : 배열의 랜더링] 랜더링한 배열의 순서가 바뀌면 in place patch전략을 사용하기 때문에 변경 부분만 patch를 하게된다. 변경된 부분에 한해서만 patch..

우선적으로 알아두실 사항은 composition api은 옵션이라는 것입니다. 기존 vue2에서 사용하는 옵션 api를 사용하셔도 되고, 본인의 취향, 각 api의 장단점을 비교하여 composition api를 사용하여도 됩니다. 공식 홈페이지에서는 options api, composition api 사용을 아래와 같이 건고하고 있다. Vue를 처음 사용하는 경우 일반적인 권장 사항은 다음과 같습니다. 학습 목적으로 이해하기 쉬운 스타일을 사용하십시오. 다시 말하지만 대부분의 핵심 개념은 두 스타일 간에 공유됩니다. 나중에 언제든지 다른 스타일을 선택할 수 있습니다. 생산용: 빌드 도구를 사용하지 않거나 점진적 향상과 같이 복잡도가 낮은 시나리오에서 주로 Vue를 사용할 계획이라면 옵션 API를 사용하..

Vue 프로젝트를 진행하면서 컴포넌트 기능이 중복이 발생하는 경우가 많이 생겼다. 그럴땐 Extends, Mixins 를 사용하여 재활용을 하면 된다. Mixins Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법 mixins은 전역으로 적용할 수 있음 (주의) 전역으로 적용하면 이후에 생성된 모든 Vue 인스턴스 에 영향을 줌 따라서, 적게 이용하고 신중하게 사용하기 사용 예제 {{ num }} {{ msg }} click import Extends from './components/Extends.vue' import Mixins1 from './components/Mixins1.vue' import Mixins2 from './components/Mixins2.vue' imp..

Props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식이다(자식 컴포넌트에서는 Props값의 수정이 불가능하다.) 부모 컴포넌트 자식 컴포넌트 export default { props: { title: {type : [String,Number], default : 100}, //여러가지 타입 허용 title2: { type: [String,Number], //여러가지 타입 허용 required: true //필수로 전달 받아야함 }, title3: { type: Object, default: () => {} //배열이나 함수의 기본 값은 항상 함수로부터 반환되어야 함 } }, title4: { type: Array, required: true, defaul..

vue.js는 공식홈페이지에 너무 정리가 잘 되어있어 블로그에는 따로 정리를 하지 않는 편인데 가끔 사용법이 헷갈리는경우가 있어 스스로 정리하려고 한다. https://kr.vuejs.org/v2/guide/computed.html computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 일단 공식홈페이지에 가면 정리는 잘 되어있다. 나는 정리를 할때 단어의 어원부터 찾아본다. computed : 계산이 되었다. -> 유추하면 이미 계산된 데이터를 처리하는 것 같다. watch : 동사로 보다의 뜻이다. -> 아마 어떤 데이터를 감시하는 역할일 거 같다. 예제를 통해 알아보자. [computed] 원본 메시지: "{{ message }}" 역..