Vue4 Vue3 : Composition API(생명주기 훅) Opitons API => Composition APIbeforeCreate, created => 필요없음beforeMount, mounted => onBeforeMount, onMountedbeforeUpdate, updated => onBeforeUpdate, onUpdatedbeforeUnmount, unmounted => onBeforeUnmount, onUnmounted 2025. 8. 19. Vue3 : Composition API(context, provide, inject) contextcontext란 setup(props, context) 함수의 두 번째 인자로 전달되는 객체로 컴포넌트 내부에서 this 없이 접근해야 하는 추가적인 속성들과 메서드를 제공한다. 1. attrs: 부모 컴포넌트로부터 전달받았지만 props로 정의되지 않은 모든 attribute(HTML 속성)를 담는 객체다. 즉, v-bind="$attrs"와 같이 템플릿에 바인딩할 때 사용한다. 기존 Options API의 this.$attrs에 해당한다. 2. emit: 자식 컴포넌트에서 부모로 이벤트를 발생시킬 때 사용하는 함수다. 기존 this.$emit과 동일한 역할을 하며, context.emit('event이름', payload) 형태로 사용한다. 3. slot: 자식 컴포넌트에 전달된 slo.. 2025. 8. 4. Vue3 : Composition API (methods, computed, watch) methods 대체export default { setup() { function setNewAge() { user.age = 32; } return {setAge: setNewAge} }}computed, v-model // v-model 사용 가능 import { ref, computed } from 'vue';export default { setup() { const firstName = ref(''); const lastName = ref(''); function setFirstName(event) { firstName.value = event.target.value; } .. 2025. 8. 1. Vue3 : Composition API (ref, reactive) 컴포지션 API란?컴포넌트 로직을 쓸 때 사용할 수 있는 대안큰 규모의 Vue 애플리케이션 개발 시 크게 두 가지 한계나 문제 상황에 부딪힐 가능성이 있음. 문제- 같이 있어야 하는 로직이 여러가지 옵션 즉, data(), methods, 연산 등에 나뉘어 있는 상황- 컴포넌트의 로직을 재사용해야하는 경우 까다롭거나 복잡해질 수 있음. 기존 옵션APIdata() { return { name: 'Max' }},methods: { doSmth() { ...}}컴포지션 APIsetup() { const name = ref('Max') function doSmth(){...} return {name, doSmth} }data(), methods, computed, watch 를 setup() 메.. 2025. 7. 31. 이전 1 다음