지금, 개발하기/Vue12 [Vue.js] compositionAPI에서 watch사용법 📌1. Composiotion API의 감시자 Vue.js에서 'watch'는 특정 데이터의 변화를 감지해서 원하는 코드를 실행해주는 기능입니다. 주로 API 호출, 데이터 유효성 검사 등 특정 데이터가 변경되자마자 어떠한 작업을 수행하려는 경우에 유용하게 사용됩니다. Vue3의 CompositonAPI에서는 감시자로 watch와 watchEffect를 사용할 수 있는데요, 이번 글에서는 watch()함수의 사용법을 하나씩 알아보도록 하겠습니다. 📌 2. watch 사용법 watch(source, (newValue, oldValue) => { ........ }); 1) 첫번째 인자: 감시하려는 소스 ① ref - ref를 사용하는 반응형 데이터 ② reactive - reactive의 getter함수를.. 2024. 4. 21. [Vue.js] compositionAPI에서 computed 사용법 📌1. Computed 속성이란? Computed 속성은 간단한 계산을 수행해주는 반응형 속성을 의미합니다. computed를 사용하면 데이터가 변경될 때마다 자동으로 업데이트 해주기 때문에 동적으로 변하는 데이터를 효율적으로 처리할 수 있습니다😉 또한, computed 속성은 데이터가 변경되지 않는 한, 한번 계산된 값을 들고있다가 필요할 때마다 재사용합니다. 이는 불필요한 계산을 방지해서 성능을 향상시켜 줍니다. 📌 2. Composition API에서 computed를 사용하기 Composition API에서도 계산된 속성과 동일한 기능을 computed 함수를 이용해서 작성할 수 있습니다. computed 속성은 함수로 정의되지만, 속성처럼 접근할 수있어서 계산된 값을 쉽게 가져올 수 있습니다. .. 2024. 4. 20. [Vue.js] 반응성(reactivity)를 가진 상태 데이터 만들기 📌1. Compositoin API에서 ref, reactive를 사용하는 이유? Vue.js Composition API에서는 Options API와 달리 반응 상태 데이터를 수동으로 생성해야 합니다. Options API에서는 data옵션에 선언된 데이터들을 Vue가 자동으로 반응형으로 만들어줍니다. 자동으로 반응성이 주입되기때문에 프로세스가 단순해 진다는 장점이 있지만, 복잡한 구성요소 논리를 처리할때는 제한이 생길 수도 있습니다. Composition API는 이러한 단점을 극복하고 효과적으로 상태를 관리하기위해 반응성을 명시하도록 바뀌었는데요. ref 또는 reactive를 사용하여 상태 데이터를 명시적으로 선택할 수 있게되었습니다. 반응성을 직접관리해야해서 사전 작업이 조금 더 필요할 수 있지.. 2024. 4. 19. [Vue.js] Immediate Watch를 이용한 🏴1. 구현 의도 test.vue {{ `${cam.cameraSeq}. ${cam.cameraName}` }} export default { props: { info : { type: Object, }, }, data() { return { cam: { cameraSeq: '', cameraName: '' } } }, watch: { info: { handler(newVal) { this.cam = newVal; }, } } }; Vue.js에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. 저는 test.vue에서 부모로부터 props를 이용해서 info 데이터를 받았습니다. 그리고 info를 cam에 바인딩해서 카메라정보를 화면에 뿌려주려고 하는데요. 실제 구현.. 2024. 2. 15. 이전 1 2 3 다음
