조아마시

쓸모 있는 상세페이지 만들기

Watch 2

[Vue] Vue 3에서 계산된 속성(computed) 사용하기

Vue 3의 computed는 데이터 속성에 의존하는 값을 계산하고 캐싱하는 데 사용되는 강력한 도구입니다. 템플릿에서 간결하게 표현식을 사용하여 값을 참조할 수 있도록 하며, 데이터 변경에 대한 반응성도 제공합니다. 이름: {{ fullName }} 나이: {{ age }} 위 코드에서 fullName은 firstName과 lastName 속성에 의존하는 계산된 속성입니다. 템플릿에서 {{ fullName }}으로 간단하게 참조할 수 있으며, firstName 또는 lastName 값이 변경될 때마다 자동으로 다시 계산됩니다.주요 특징:캐싱: 계산된 속성은 의존하는 데이터가 변경되지 않는 한 다시 계산되지 않습니다. 이는 성능 향상에 도움이 됩니다.반응성: 의존하는 데이터가 변경되면 자동으로..

웹개발/vuejs 2024.07.29

[Vue] Vue3에서 watch와 watchEffect 비교 알아보기

Vue3에서 reactive 데이터 변화를 감지하고 반응하는 데 사용되는 두 가지 주요 방법인 watch와 watchEffect에 대한 차이점을 살펴보겠습니다.1. 기본 동작:watch: 특정 reactive 값을 명시적으로 감시하고 해당 값이 변경될 때 콜백 함수를 실행합니다. 이전 값과 현재 값을 모두 콜백 함수에 제공합니다.watchEffect: 콜백 함수 내부에서 사용되는 모든 reactive 의존성을 자동으로 추적합니다. 명시적인 값 지정 없이 변화에 반응합니다. 콜백 함수에는 현재 값만 제공됩니다.2. 사용 시나리오:watch:이전 값과 현재 값을 모두 사용하여 계산해야 하는 경우특정 reactive 값에만 반응해야 하는 경우코드 간 명확성을 위해 의도적으로 값을 지정하고 싶은 경우watchE..

웹개발/vuejs 2024.07.22
728x90