reactivity (7) 썸네일형 리스트형 [Vue3] watch vs watchEffect 사용사례 비교 해당 글을 번역한 글입니다. https://www.vuemastery.com/blog/vues-watch-vs-watcheffect-which-should-i-use/ Vue’s watch vs watchEffect, which should I use? | Vue Mastery Let’s unwrap the core differences between watch and watchEffect so that you can use the best tool for the job in your day-to-day code. www.vuemastery.com Vue에서 reactive value(ref, reactive, computed)이 변경될 때마다, 특정 함수(사이드이펙트를 포함한 함수)를 실행하고 싶다면,.. [Vue3] v-model props로 사용하기: modelValue 컴포넌트의 props로 v-model을 사용하는 방법을 알아봅니다. Props은 readOnly reactive object임 즉 computed 등으로 반응성 체킹은 가능하지만 props를 직접 수정할 수는 없음 우회 방법 : modelValue https://vuejs.org/guide/components/events.html#usage-with-v-model Component Events | Vue.js vuejs.org 놀랍게도 Vue3은 내부적으로 v-model의 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 이를 해결함 즉 아래와 같은 소스코드는 아래와 같이 컴파일러에 의해 변환됨. 자식 컴포넌트에서는 이를 대비한 구현을 해줘야 함 참고 : 아래와 같이 구현하는 것도 가능함. 뭔가 리코일 같은 .. [Vue3] props와 컴포넌트 상태 동기화 Vue3에서 컴포넌트의 상태와 외부 props 값을 동기화 하는 방법을 알아봅니다. TL;DR props은 기본적으로 readOnly인 reactive 값임 기본값을 reactive하게 선언 내부적으로 사용할 상태를 computed로 선언하여 props 여부에 따라 활용 여부 결정 useControllable 컴포저블 해당 함수는 headlessUI 깃헙에서 가져옴 사용처에서는 아래와 같이 활용함. let [checked, theirOnChange] = useControllable( computed(() => props.modelValue), // props를 활용한 computed (value: boolean) => emit('update:modelValue', value), // 값 변경 시 호출활 .. Vue3의 반응성 완벽 이해 2편 : ref와 computed Vue3의 반응성을 직접 구현하며 Vue3에 대한 더 깊은 이해를 도모해 봅시다. 이전 시리즈 : 2022.12.10 - [Vue.js] - Vue3의 반응성 완벽 이해 1편 : 종속성 추적 Vue3의 반응성 완벽 이해 1편 : 종속성 추적 vue mastery의 리액트 코어팀이 설명해주는 vue3의 반응성의 원리를 알아봅니다. 공식 문서와 nhn의 게시물을 읽어봤지만, 약간 납득이 안되는 부분들이 있었습니다. 해당 강의를 통해 어느정도 해소 itchallenger.tistory.com 실행 중인 효과를 저장하는 전역 변수와 ref 이전 게시물의 예제 소스 코드(all-together.js)의 동작에는 하나의 문제점이 있는데요, 이전 소스 코드 실행 후 get을 실행할 때마다 effect가 추가됩니다. .. Vue3의 반응성 완벽 이해 1편 : 종속성 추적 vue mastery의 리액트 코어팀이 설명해주는 vue3의 반응성의 원리를 알아봅니다. 공식 문서와 nhn의 게시물을 읽어봤지만, 약간 납득이 안되는 부분들이 있었습니다. 해당 강의를 통해 어느정도 해소된 느낌입니다. 해당 아티클에서 다룰 내용 Vue3 Reactive 모듈의 디자인 패턴 및 디자인 디시전 Vue3 반응성의 원리 뷰의 반응성 이해하기 아래의 간단한 뷰 앱을 봅시다. 해당 앱의 뷰모델은 세 가지 역할을 수행해야 합니다. 페이지의 product.price 값 업데이트 페이지의 product.price * product.quantity 값 업데이트 totalPriceWithTax 함수를 다시 호출하고 페이지 업데이트 Price: ${{ product.price }} Total: ${{ pro.. vue3의 반응성(reactivity) 원리 간단 정리 출처 : https://vuejs.org/guide/extras/reactivity-in-depth.html Reactivity in Depth | Vue.js vuejs.org 아래와 같은 코드가 실행된다 가정하자 import { ref, watchEffect } from 'vue' const A0 = ref(0) const A1 = ref(1) const A2 = ref() watchEffect(() => { // tracks A0 and A1 A2.value = A0.value + A1.value }) // triggers the effect A0.value = 2 1. 이펙트(ex: watchEffect,computed 내부 함수) 함수가 전역 변수에 할당되며 파라미터로 받은 업데이트 함수를 실행.. Vue3 Reactivity In Depth (뷰3의 반응성 원리 이해하기) Vue3은 변화를 어떻게 추적하여 반응할까요? 공식문서의 번역입니다. https://vuejs.org/guide/extras/reactivity-in-depth.html Reactivity in Depth | Vue.js Less than 48 hours to get 45% off at Vue School Access 800+ lessons including the Vue.js 3 Masterclass vuejs.org Vue의 가장 독특한 기능 중 하나는 거슬리지 않는 반응성 시스템입니다. 컴포넌트 상태는 반응형 JavaScript 객체로 합성됩니다. 해당 상태를 수정하면 뷰가 업데이트됩니다. 상태 관리를 간단하고 직관적으로 만들지만, 일반적인 문제를 피하기 위해 동작 방식을 이해하는 것도 중요합니다... 이전 1 다음
