Study/Vue23 Vue3 ) watch 와 watchEffect watch?? watch 는 개발자가 코드로 지정한 변수값의 변화를 감시하여 콜백함수로 하여금 부가적인 작업을 할 수 있도록 해줍니다. watch 는 지정된 특정한 변수의 감시와 더불어 값이 변경되기 이전 값을 참조할 수 있다는 장점이 있습니다. 컴포넌트가 생성되어 변수가 할당되기 전에 모든 변수는 null 값을 가지고 있습니다. 이 후 변수의 초기값이 들어가게 되는데, watch는 기본적으로 이러한 null값에서 초기값으로 넘어가는 과정을 데이터의 변경으로 판단하지 않습니다. 일반적으로 이 값을 바라볼 일은 없지만 같은 컴포넌트를 다시 불러올 때 props 의 처음 값이 매우 중요할 때가 있습니다. 이런 경우에는 immediate 옵션을 true로 설정해주면 처음 값도 볼 수 있습니다. 아래의 예시코드.. 2022. 1. 8. Vue 3 ) 뷰 라이프사이클의 변경?! Vue Component LifeCycle ( 생명주기 ) Vue 공식문서를 살펴보던 중 기존의 LifeCycle 과 다르게 destory 부분이 없어지고 새로운 LifeCycle 요소가 생긴 것을 확인할 수 있었습니다. 그래서 새롭게 바뀌어진 Vue LifeCycle 에 대해 정리하는 글을 쓰고자 했습니다. LifeCycle 이란? 컴포넌트를 생성하여 DOM 노드 트리에 마운트하고, 불필요한 엘리먼트를 제거하는 일련의 과정을 생명주기라고 합니다. Vue는 각 생명주기를 Hooking 할 수 있는 방법을 제공하는데 이를 LifeCycle Hook 이라고 합니다. Options API를 사용할 경우, 각 LifeCycle은 지정된 옵션 함수를 정의하여 Hooking 할 수 있습니다. LifeCycle은 어.. 2022. 1. 8. Vue ) 이벤트 수식어 v-on 디렉티브가 제공하는 이벤트 수식어 이벤트 수식어 설명 .stop 이벤트 전파를 방지합니다. stopPropagation() 과 동일 .prevent 브라우저의 기본 동작을 금지합니다. preventDDefault() 와 동일 .capture 이벤트리스너의 capture 옵션을 활성화시킵니다. .self 이벤트가 자식 엘리먼트가 아닌 현재 엘리먼트에서 발생했을 때만 핸들러를 호출합니다. .once 최대 한번의 클릭만 허용합니다..once.prevent 와 같이 사용하면 처음 클릭 시 태그의 본연 기능을 방지하고 원하는 기능을 실행시킬 수 있습니다. .passive 이벤트리스너의 passive 옵션을 활성화시킵니다. .exact 정확히 해당 키만 눌렀을 때 핸들러를 호출합니다. "@click.ctr.. 2022. 1. 8. Vue) Vite?, 왜 사용할까? Vite란? Vue3버전으로 개발을 함에 있어 별다른 번들 생성 없이 ES 모듈을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴입니다. 왜 Vite 를 사용하나요? Vite 의 등장배경 👓 현재 Webpack, Rollup, Parcel 과 같은 도구들 덕분에 프론트엔드 개발자들의 개발 경험이 크게 향상 되었습니다. 그러나 점점 높은 수준의 앱을 개발하기 시작하면서 처리하는 JavaScript의 양도 기하급수적으로 증가했습니다. 대규모 프로젝트에서 수 천 개의 모듈을 담게 되면서 JavaScript 기반 도구에 대한 성능 병목 현상이 일어나기 시작했습니다. 개발 서버를 시작하는데 많은 시간이 소요되며, HMR을 사용하더라도 수정이 반영되는데에 몇 초의 시간이 걸릴 수 있습니다. 이러한 사항들은 .. 2022. 1. 7. Vue3를 준비하는 자세 (1) Vue2에서 Vue3 버전으로 넘어가면서 변경된 사항 중 하나인 템플릿 디렉티브의 변화에 관한 정리글입니다. Vue3에서의 변경사항 (1) v-model 사용법의 변화 변경사항 커스텀 컴포넌트를 사용할 때, v-model prop와 event의 기본 명칭이 변경되었습니다. prop : value -> modelValue event : input -> update:modelValue v-bind 의 .sync 수식어와 컴포넌트의 model 옵션이 제거되고 v-model 인자로 대체 되었습니다. 새로운 기능 동일 컴포넌트에서 다중의 v-model 바인딩이 가능하게 되었습니다. 사용자 지정 v-model 수식어를 생성하는 기능이 추가되었습니다. (2) v-for 문법의 변화 1. 조건부 분기에서의 key Vu.. 2022. 1. 2. 이전 1 2 3 다음 반응형
