반응형 lifecycle hook2 Vue.js Composition API 알아보기 Composition API 컴포넌트에서 사용하는 특정 기능의 코드를 유연하게 구성할 수 있는 함수 기반의 API Vue3에서 가장 중요한 핵심 기능 [기존]개발 방식은 연관성 있는 로직들이 data, computed, methods 등에 흩어져 있어서 프로젝트 규모가 커질수록 관리, 추적에 어려움 => Composition API의 setup()을 사용하여 관련 코드들을 묶어서 구현할 수 있어서 코드 관리, 추적이 용이 [기존] Mixin을 통한 컴포넌트 기능 재사용 부분도 오버라이딩 문제나 다중 Mixin 상속 시 컴포넌트 관리가 어려워 짐 => Composition API를 통해서도 공통기능 제공 가능 setup() 메소드 - 샘플 코드 {{ count }} {{ countDouble }} Plus.. 2022. 4. 3. Vue.js 인스턴스 - 옵션(속성) 및 라이프사이클 Vue 인스턴스 Vue를 사용하기 위해 필수적으로 생성해야 하는 기본 단위(new Vue();) Vue인스턴스는 Vue를 통해 생성하는 하나의 오브젝트 인스턴스를 사용함으로써 Vue에서 미리 선언되어 있는 속성,API를 재사용 및 활용 할 수 있음 Vue 인스턴스 옵션(속성) el: Vue가 실행되는 html DOM요소를 지정, CSS선택자를 사용(ex. id: #, class: . 접두어 사용) data: Vue인스턴스가 관리하는 데이터, Reactivity 반영(data 변경 시 화면 자동 반영) template: 화면에 표시할 요소(html, css 등) props: 부모컴포넌트의 데이터를 받을 수 있는 속성의 리스트([]) methods: 화면의 동작 및 이벤트 로직을 제어하는 메소드 선언 com.. 2022. 3. 16. 이전 1 다음 반응형
