본문 바로가기

반응형

vue3 composition api

(2)
뷰(vue) options api와 composition api의 라이프사이클(lifecycle) lifecycle 이란 ? vue의 인스턴스가 생성, DOM 트리에 마운트, 불필요한 엘리먼트를 제거하는 일련의 과정을 생명주기(life cycle) 이라고 합니다. 여기서 vue는 각 생명주기를 hooking 할 수 있는 방법을 제공하는데 이를 life cycle hook 이라고 합니다. 라이프 사이클을 잘 이해하고 사용해야하는 이유는? 프로그램에 대한 통제권을 가지기 위해서 입니다. 라이프사이클을 이해하면 컴포넌트의 생성, 변화하는 프로세스를 통제할 수 있게 됩니다. 내가 만든 프로그램이 어떻게 동작되는지 모른다면 복잡하고 또, 예외상황에 맞닿는다면 통제하기 어렵게 될 수도 있습니다. 프로젝트가 실행될 때, 인스턴스를 생성, 데이터 초기화, 데이터 감시설정, 템플릿컴파일, 인스턴스를 DOM에 마운트,..
ref, reactive 어떤 것이 더 좋을까? ref와 reactive 차이점 목차 ref()는 무엇인가? reactive()는 무엇인가? ref()와 reactive()의 차이점 ref(), reactive() 어떤것을 쓰면 좋을까? vue3(Composition api)에서 반응형 data를 사용하는 방법에는 ref, reactive가 있습니다. 1. ref()는 무엇인가? 반응형데이터를 사용할때 쓰이는 vue3에서 추가된 Composition API이며 원시타입일 때 주로 사용합니다. (String, Number, Boolean...) .value 속성에 새값을 할당 할 수 있습니다. 즉, .value로 변화하는 값을 즉시사용할 수 있으며 즉시 변화시킬 수도 있습니다. 주로 원시타입일 때 사용하지만 object 타입도 사용 가능합니다. (Array, Object..) Obje..

반응형