| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- watchEffect
- let
- vitre
- mobile dev tools
- reactivity
- computed
- Component
- watch
- async
- composition api
- html 엔티티
- promise
- await
- const
- ref
- 티스토리챌린지
- drective
- 앱 빌드
- composition API
- asynchronus
- dex모드
- hoisting
- vue
- 오블완
- synchronus
- setup 함수
- 템플릿 문법
- tdz
- eruda
- es6
- Today
- Total
목록reactivity (2)
uxtry
Vue3의 반응형(Reactivity) 시스템은 컴포넌트 상태가 변경될 때마다 UI를 자동으로 업데이트하여, 동적인 사용자 인터페이스를 쉽게 구현할 수 있도록 돕습니다. 반응형 시스템의 기초는 ref, reactive, computed, 그리고 watch와같은 API를 사용하는 것입니다. 1.refref는 원시 데이터 타입(문자열, 숫자, 블리언 등)을 반응형으로 만드는데 사용합니다. ref를 사용하면 값이 바뀔 때 Vue가 자동으로 UI를 업데이트 합니다. ref로 정의된 변수의 값을 읽거나 쓸 때는 .value를 통해 접근합니다. 카운트: {{ count }} 증가 ★ Vue SFC Playground 코드 실행 →이 코드에서 count는 반응형 변수로 설정되었고 count..
Vue 3의 반응성(Vue 3 reactivity) 시스템은 UI와 데이터 간의 연결을 자동으로 관리하는 핵심 기능입니다. 이 시스템은 Proxy 객체를 기반으로 하여, Vue가 데이터의 속성이 접근되거나 수정될 때 이를 감지하고 DOM을 업데이트 합니다. 다음은 Vue 3의 반응성 시스템의 주요 구성 요소입니다. 1.Reactive API (reactive 와 readonly)reactive: 깊은 반응형 객체를 생성합니다. 객체의 모든 속성이 추적되며, 중첩된 객체도 반응형으로 만들어집니다.readonly: 속성을 수정할 수 없는 객체를 생성합니다. 반응형 데이터를 노출하되 직접 수정하는 것을 방지할 때 유용합니다.import { reactive, readonly } from 'vue';const s..