[Vue 3] 반응성( Reactivity )

변수가 반응성을 가지기 위해서는 프록시로의 변환이 필요하고, 

반응성을 해제하기 위해서는 프록시에서 일반 변수로의 변환이 필요하다.

 

반응성 관련 API

1. reactive
   객체의 속성들이 반응성을 갖게 만든다.기본적으로 변수가 반응성을 갖도록할 때는 ref 함수를 이용하는데,
   객체의 속성으로 변수를 모아 reactive를 사용하면 변수의 개수가 많을 때 매우 유리하다.
2. readonly
   일반 객체나 프록시 객체를 읽기전용 프록시로 변경한다. 기본적으로 객체 모든 속성을 읽기전용으로 변경
3. isProxy
   인자로 들어온 변수가 reactive나 readonly 등으로 만들어진 프록시 객체인지 확인해준다.
4. isReactive
   reactive로 생성된 프록시 객체인지 확인해준다.
5. isReadonly
   readonly로 생성된 프록시 객체인지 확인해준다.
6. toRaw
   reactive와 readonly로 만들어진 프록시 객체를 원래 객체로 원복시킨다.
7. markRaw
   markRaw로 생성된 객체는 reactive나 readonly를 통해서 프록시 객체로 생성되지 않는다.
   
8. shallowReactive
   참조되는 객체의 직계 속성에만 reactive를 부여하고 내부에 중첩된 객체에는 reactive를 부여하지 않는다.
   

   const state = shallowReactive({
   	foo: 1, // Reactive
       nested: { bar: 2} // Reactive가 아니다.
   )

9. shallowReadonly
   위와 마찬가지로 직계 속성만 readonly 처리를 한다.

Refs

1. ref
   전달받은 기본 자료형 변수 반응형 객체로 변경한다. 
   value 속성을 통해서 값을 자유롭게 변경할 수 있다. 👉 반응형 객체
2. unref
   ref를 다시 일반 변수로 바꾼다. 내부적으로 프록시 객체에서 분리하는 과정 진행
3. toRef
   reactive API로 생성된 객체의 속성을 ref를 이용해 반응형 객체로 생성한다.
4. toRefs 
   toRef를 해당 객체의 모든 속성에 적용한다.
5. isRef
   ref 객체인지 확인한다.
6. customRef
   track 함수와 trigger 함수를 인자로 받고 get/set 함수를 리턴하는 사용자 지정 ref 를 생성한다.
   get 함수에서 사용자가 필요한 일을 마무리 한 후 track 함수를 불러주면 되고,
   set 함수에서 사용자가 정의한 일을 마무리 후 trigger 함수를 호출하게 만든다.
7. shallowRef
   참조된 객체의 value가 통째로 변경될 때만 반응형으로 작동한다.
8. triggerRef
   shallowRef로 참조된 객체에 대한 업데이트를 강제로 일으킨다.

 

 

💬 JavaScript Proxy 참고하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy - JavaScript | MDN