vue: Vue 3 reactivity

실시간으로 감시되는 코드 with chatGPT

 

Vue 3의 반응성(Vue 3 reactivity) 시스템은 UI와 데이터 간의 연결을 자동으로 관리하는 핵심 기능입니다. 

이 시스템은 Proxy 객체를 기반으로 하여, Vue가 데이터의 속성이 접근되거나 수정될 때 이를 감지하고 DOM을 업데이트 합니다.

 

다음은 Vue 3의 반응성 시스템의 주요 구성 요소입니다.

 

1.Reactive API (reactive 와 readonly)

• reactive: 깊은 반응형 객체를 생성합니다. 객체의 모든 속성이 추적되며, 중첩된 객체도 반응형으로 만들어집니다.
• readonly: 속성을 수정할 수 없는 객체를 생성합니다. 반응형 데이터를 노출하되 직접 수정하는 것을 방지할 때 유용합니다.

import { reactive, readonly } from 'vue';

const state = reactive({ count:0 });
state.count++; //이 변경 사항은 반응성 시스템에 의해 추적되고 바인딩된 요소가 업데이트 됩니다.

const readonlyState = readonly(state);
readOnlyState.count++; //엄격모드에서 오류 발생 (수정 불가)

 

2. Ref API (ref와 unref)

• ref: 원시 값(숫자나 문자열 등)을 반응형으로 만드는 방법입니다. 반응형 참조를 생성하며, .value속성을 통해 참조 값을 접근하거나 수정할 수 있습니다.
• unref: ref의 내부 값을 가져오는 방법입니다. 템플릿 외부에서 ref에 접근할 때 유용합니다.

import { ref, unref } from 'vue';

const count = ref(0);
counst.value++; //count를 증가시킵니다.

console.log(unref(count)); //1(현재 값을 반환)

 

3. computed

• computed 는 반응형 속성의 파생 값을 정의할 때 사용됩니다. 종속된 데이터가 변경되면 자동으로 다시 계산됩니다.

import { computed } from 'vue';

const state = reactive({ count: 0 });
const doubleCount = computed(() => state.count * 2);

 

4. watch

• watch 는 특정 반응형 데이터의 변화를 감지하고 그에 따라 특정 작업을 수행하는 데 사용됩니다. 예를 들어 API 호출이나 상태 업데이트 등이 가능합니다.

import { watch } from 'vue';

watch(() => state.count, (newCount, oldCount) => {
	console.log(`count changed from ${oldCpunt} to ${newCount}`);
});

 

이러한 API들은 Vue 3의 반응성을 기반으로 효율적인 상태 관리를 가능하게 하여, 개발자가 UI와 데이터 상태를 쉽게 동기화할 수 있도록 도와줍니다.