vue 2

v-if와 v-show의 차이점.

v-if와 v-show. 둘 다 조건부 렌더링에서 사용하는데에 쓰입니다. v-if는 조건이 만족했을 때에 렌더링을 하고 그렇지 않을 시에 dom 레벨에서 제거되며, 그와 관련된 모든 감시들도 제거됩니다. 만약 컴포넌트라면 인스턴스가 제거 되며 이후 렌더링이 되면 모든 상태가 초기화가 되겠죠. v-if는 주로 특정한 데이터를 가지고 있지 않을 시 오류를 발생시키거나, 컴포넌트를 많이 사용되는 경우에 사용됩니다. 주로 에러 출력이나, 비동기 처리로 불러온 값에 따라 렌더링을 요구할 시에 사용하죠. v-show는 display:none으로 처리를 하기 때문에 dom 레벨에서도 제거되지 않으며, 모든 감시들도 제거되지 않기 때문에 상태값도 초기화가 되지 않습니다. 추로 변경 빈도가 높은 경우에 사용하며 대표적으..

vue 2023.04.07

[vue 3] computed와 v-model을 통한 데이터 바인딩.

제목은 거창하게 써놨지만 별 건 아닙니다. 부모에 v-model로 연결된 값을 자식이 바꾸고자 할때 사용할 수 있는 방법입니다. 이야기만 들으면 간단하죠. 스토어를 사용하면 됩니다. pinia를 통해 store를 만들고 store에 값을 넣으면 되죠. 저 역시도 그렇게 생각했었고, 실무에서 그렇게 사용할려고 했습니다. 하지만. 만약 배열 안에 있는 객체의 값만을 바꿀려면 어떻게 해야 할까요? items: [ { uuid: '1', keyword: '탭 1', title: '', content: '', thumbnail: '', }, { uuid: '2', keyword: '탭 2', title: '', content: '', thumbnail: '', }, { uuid: '3', keyword: '탭 3..

vue 2023.02.09