Vue 3 에서 ref 와 reactive 의 상세 한 설명 과 확장

ref 와 reactive
필사적으로 기억 하기:ref 본질 도 reactive 이 고 ref(obj)는 reactive({value:obj})와 같 습 니 다.

vue 3 에서 응답 식 데 이 터 를 실현 하 는 방법 은 ref 와 reactive 를 사용 하 는 것 이다.이른바 응답 식 은 인터페이스 와 데이터 가 동기 화 되 어 실시 간 업데이트

를 실현 할 수 있다.

vue 2 에서 응답 식 은 define Property 를 통 해 이 루어 졌 고 vue 3 에 서 는 ES6 의 Proxy 를 통 해 이 루어 졌 다

1.reactive

reactive 의 매개 변 수 는 하나의 대상 이 어야 합 니 다.json 데이터 와 배열 을 포함 하여 모두 가능 합 니 다.그렇지 않 으 면 응답 식

이 없습니다.

reactive 에 다른 대상(예 를 들 어 시간 대상)을 전달 하면 기본 적 인 상황 에서 대상 인터페이스 가 자동 으로 업데이트 되 지 않 습 니 다.업데이트 하려 면 대상 에 게 다시 할당 하여 해결 할 수 있 습 니 다

2.ref
reactive 가 생 겼 는데 왜 ref 를 해 야 합 니까?우리 가 특정한 변 수 를 응답 식 으로 만 들 려 고 할 때 reactive 를 사용 하 는 것 이 비교적 번 거 로 울 수 있 기 때문에 vue 3 는 ref 방법 으로 간단 한 값 의 감청 을 제공 하지만 ref 는 간단 한 값 만 들 어 갈 수 있 는 것 이 아니 라 그의 밑바닥 은 reactive 이기 때문에 reactive 가 있 고 그 는 모두 가지 고 있다.아니면 그 옛말?
필사적으로 기억 하기:ref 본질 도 reactive 이 고 ref(obj)는 reactive({value:obj})와 같 습 니 다.

vue 에서 ref 의 값 을 사용 합 니 다.value 를 통 해 가 져 오지 않 아 도 됩 니 다

js 에서 ref 의 값 을 사용 하려 면.value 를 통 해 가 져 와 야 합 니 다

2.shallow Ref 와 shallow Reactive
재 귀 감청 과 비 재 귀 감청
ref 와 reactive 는 모두 재 귀 감청 에 속 합 니 다.즉,데이터 의 모든 층 이 응답 식 입 니 다.데이터 의 양 이 비교적 많 으 면 성능 이 매우 소모 되 고 재 귀 감청 이 아 닌 데이터 의 1 층 만 감청 합 니 다.
1.ref 와 shallow Ref

ref 가 정의 한 데 이 터 는 층 마다 응답 식 데이터

shallow Ref 가 정의 한 데 이 터 는 1 층 만 응답 식 입 니 다.즉,'value'를 변경 할 때 만 응답 식

을 실현 할 수 있 습 니 다.

let age = ref({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//      
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

let age = shallowRef({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//      
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

shallowRef 를 사용 하면 triggerRef()방법 으로 인 터 페 이 스 를 주동 적 으로 업데이트 하여 인터페이스 리 셋 을 실현 할 수 있 습 니 다

function doSome(){
  age.value.f.s.c = 'c';
  //      
  triggerRef(age);
}

2.reactive 와 shallow Reactive

메모:shallow Reactive 는 triggerRef()와 같은 방법 이 없습니다.
3.toRaw
toRaw 의 등장 은 어떤 문 제 를 해결 하 는 것 일 까요?
어떤 때 는 데이터 가 응답 식 실시 간 으로 업데이트 되 는 것 을 원 하지 않 습 니 다.toRaw 를 통 해 ref 또는 reactive 가 인용 한 원시 데 이 터 를 얻 을 수 있 습 니 다.원시 데 이 터 를 수정 함으로써 인터페이스의 업 데 이 트 를 초래 하지 않 습 니 다.ref 와 reactive 포장 후의 데 이 터 를 수정 할 때 만 인터페이스 응답 식 변화 가 발생 합 니 다.

let obj1 = {...};
//state obj1     ，state      Proxy  ，     obj1
let state = reactive(obj1);
//  toRaw         ，      obj1     ，obj2 obj1      
let obj2 = toRaw(state)
console.log(obj1 === obj2);//true

어떤 학우 들 은 object 1 로 데 이 터 를 수정 하면 되 지 않 겠 느 냐 고 물 을 것 이다.그러나 관건 은 우리 가 reactive 를 사용 하여 데 이 터 를 정의 할 때 보통 obj 를 정의 하지 않 고 그 를 reactive 에 전달 하 는 것 이다.모두 reactive 에서 데 이 터 를 직접 쓰 는 것 이다.
4.markRaw
toRaw 와 달리 markRaw 포장 후의 데 이 터 는 영원히 추적 되 지 않 습 니 다!
아직 쓸모 가 없 음(수 동 개 머리)

let obj1 = {name: "lijing", age: 18}
let obj2 = markRaw(obj1);
//  reactive             ，       ，          
let state1 = reactive(obj2)

console.log(obj1 === obj2);//true

5.toRef 와 toRefs
ref 와 toRef 는 모두 응답 식 데 이 터 를 구성 하 는 데 사용 되 는데 이들 은 어떤 차이 가 있 습 니까?두 가지 예 를 보 세 요.
1. ref
복사,응답 식 데 이 터 를 수정 하면 이전의 데이터 에 영향 을 주지 않 고 데이터 가 바 뀌 면 인터페이스 가 자동 으로 업 데 이 트 됩 니 다.
전 환 된 것 은 RefImpl 형식 입 니 다.

ref 를 사용 하여 한 대상 의 간단 한 데이터 형식 속성 에 대해 응답 식 개 조 를 한 후에 응답 식 데 이 터 를 수정 하면 원본 데이터 에 영향 을 주지 않 습 니 다.위의 그림 에서 state 1 을 통 해 값 을 수정 한 후에 obj 1 의 a 속성 값 은 변화 가 없 음 을 알 수 있 습 니 다.여기 주의 점 이 있 습 니 다.수 정 된 이 속성 은 반드시 간단 한 데이터 형식 이 어야 합 니 다.구체 적 인 값 은 인용 이 될 수 없습니다.만약 에 이 속성 도 하나의 대상 이 라면 영향 을 줄 수 있 습 니 다.대상->참조 때 문 입 니 다!
예 를 들 어 위의 예 에서 state 1 에 들 어 온 것 이 obb1.f 라면 상황 이 완전히 다르다.

//   let state1 = ref({b: '2',s: {c: '3'}})
//     --->let state1 = reactive({value: {....}}})
let state1 = ref(obj1.f);

2.  toRef
toRef 를 사용 하여 변환 하면 응답 식 데 이 터 를 수정 하면 원본 데이터 에 영향 을 주 고 데이터 가 바 뀌 지만 인터페이스 가 자동 으로 업데이트 되 지 않 습 니 다.
전 환 된 것 은 Object RefImpl 형식 입 니 다.

ref 는 깊 은 복사 와 유사 하고 toref 는 얕 은 복사 와 유사 하 다.
3.  toRefs
대상 의 모든 속성 을 옮 겨 다 니 며 응답 식 데이터 로 바 꿉 니 다.이 는 toRef 가 하나의 key 만 전달 할 수 있 기 때 문 입 니 다.toRefs 가 달성 한 효 과 는 toRef 와 같 기 때 문 입 니 다.

tips:현재 가장 많이 사용 되 는 것 은 ref 와 reactive 입 니 다.다른 것 은 후기 에 성능 을 개선 하 는 데 사 용 됩 니 다.
총결산
Vue 3 의 ref 와 reactive 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Vue 3 ref 와 reactive 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!