6 Vue3✨🛀의 ref 및 반응형 질문을 이해해야 합니다.

Vue3는 개발자에게 반응형 데이터를 구현하기 위한 두 가지 APIref 및 reactive를 제공하며, 이 API는 Vue3 개발 프로젝트에서 자주 사용하는 두 가지 API이기도 합니다.

이 문서에서는 소개 관점에서 이 두 API를 소개합니다. 오류가 있으면 함께 토론하고 배우십시오 ~

This article uses Vue3 setup syntax.

초심자 단계에서 마스터해야 할 것은 이 두 API의 "무엇", "사용 방법"및 "공통 문제"입니다.

1. 리액티브 API는 어떻게 사용하나요?

reactive 메서드는 반응형 개체를 만드는 데 사용됩니다. 객체/배열 매개변수를 사용하고 객체의 반응형 사본을 반환합니다. 개체의 속성 값이 변경되면 개체가 사용되는 위치가 자동으로 업데이트됩니다.

객체 및 배열을 매개변수로 사용하여 테스트:

import { reactive } from 'vue'

let reactiveObj = reactive({ name : 'Chris1993' });
let setReactiveObj = () => {
  reactiveObj.name = 'Hello Chris1993';
}

let reactiveArr = reactive(['a', 'b', 'c', 'd']);
let setReactiveArr = () => {
  reactiveArr[1] = 'Hello Chris1993';
}

템플릿 콘텐츠:

<template>
  <h2>Vue3 reactive API Base</h2>
  <div>
    Object:{{reactiveObj.name}} 
    <span @click="setReactiveObj">Update</span>
  </div>
  <div>
    Array:{{reactiveArr}} 
    <span @click="setReactiveArr">Update</span>
  </div>
</template>

페이지 내용:


Update 버튼을 각각 클릭하면 데이터가 변경된 후 뷰의 콘텐츠도 함께 업데이트되는 것을 볼 수 있습니다.

2. 참조 API를 사용하는 방법은 무엇입니까?

ref의 기능은 기본 데이터 유형(primitive data type)을 반응형 특징을 가진 데이터 유형으로 변환하는 것이다. 7개의 기본 데이터 유형이 있습니다.

JS/TS에서 String의 값을 읽고 수정하는 경우에는 Number를 사용하여 가져와야 하며 템플릿에서 읽을 경우에는 BigInt를 사용할 필요가 없습니다.

문자열과 객체를 매개변수로 사용하여 테스트:

import { ref } from 'vue'

let refValue = ref('Chris1993');
let setRefValue = () => {
  refValue.value = 'Hello Chris1993';
}
let refObj = ref({ name : 'Chris1993' });
let setRefObj = () => {
  refObj.value.name = 'Hello Chris1993';
}

템플릿 콘텐츠:

<template>
  <h2>Vue3 ref API Base</h2>
  <div>
    String:{{refValue}} 
    <span @click="setRefValue">Update</span>
  </div>
  <div>
    Object:{{refObj.name}}
    <span @click="setRefObj">Update</span>
  </div>
</template>

페이지 내용:


Boolean 버튼을 각각 클릭하면 데이터가 변경된 후 뷰의 콘텐츠도 함께 업데이트되는 것을 볼 수 있습니다.

3. 심층 객체나 배열에 대해 reactive를 사용할 수 있습니까?

대답은 예입니다. Symbol는 ES2015 Proxy API을 기반으로 구현되며 응답성은 전체 개체의 모든 중첩 수준입니다.

객체 및 배열을 매개변수로 사용하여 테스트:

import { reactive } from 'vue'

let reactiveDeepObj = reactive({
  user: {name : 'Chris1993'}
});
let setReactiveDeepObj = () => {
  reactiveDeepObj.user.name = 'Hello Chris1993';
}

let reactiveDeepArr = reactive(['a', ['a1', 'a2', 'a3'], 'c', 'd']);
let setReactiveDeepArr = () => {
  reactiveDeepArr[1][1] = 'Hello Chris1993';
}

템플릿 콘텐츠:

<template>
  <h2>Vue3 reactive deep API Base</h2>
  <div>
    Object:{{reactiveDeepObj.user.name}}
    <span @click="setReactiveDeepObj">Update</span>
  </div>
  <div>
    Array:{{reactiveDeepArr}}
    <span @click="setReactiveDeepArr">Update</span>
  </div>
</template>

페이지 내용:


Null 버튼을 각각 클릭하면 데이터가 변경된 후 뷰의 콘텐츠도 함께 업데이트되는 것을 볼 수 있습니다.

4. 반응 반환 값이 소스 객체와 같은가?

Undefined가 ES2015 Proxy API을 기반으로 구현되었기 때문에 대답은 같지 않습니다. 반환 결과는 프록시 개체입니다.

테스트 코드:

let reactiveSource = { name: 'Chris1993' };
let reactiveData = reactive(reactiveSource);

console.log(reactiveSource === reactiveData);
// false

console.log(reactiveSource);
// {name: 'Chris1993'}

console.log(reactiveData);
// Reactive<{name: 'Chris1993'}>

5. TypeScript는 ref 및 반응 매개변수 유형을 어떻게 작성합니까?

TypeScript를 사용하여 ref/reactive 매개변수 유형을 작성할 때 ref/reactive 인터페이스 유형에 따라 특정 유형을 구현할 수 있습니다.

function ref<T>(value: T): Ref<T>

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

이전 예제 코드를 수정합니다.

import { ref } from 'vue'

let refValue = ref<string>('Chris1993');

let setRefValue = () => {
  refValue.value = 'Hello Chris1993'; // ok!
  refValue.value = 1993; // error!
}

let reactiveValue = reactive<{name: string}>({name: 'Chris1993'});

6. 반응 매개변수로서의 ref 값은 어떻습니까?

이미 ref 객체가 있고 이를 .value 객체에서 사용해야 하는 경우 어떻게 됩니까?

가정하다:

let name = ref('Chris1993');
let nameReactive = reactive({name})

다음과 같이 할 수도 있습니다.

let name = ref('Chris1993');
let nameReactive = reactive({name})
console.log(name.value === nameReactive.name); // true

name.value = 'Hello Chris1993';
console.log(name.value);        // Hello Chris1993
console.log(nameReactive.name); // Hello Chris1993

nameReactive.name = 'Hi Chris1993';
console.log(name.value);        // Hi Chris1993
console.log(nameReactive.name); // Hi Chris1993

이는 .value가 모든 딥Update의 압축을 풀고 reactive를 반응형으로 유지하기 때문입니다.
Update가 할당에 의해 reactive 속성에 할당되면 ref도 자동으로 압축 해제됩니다.

let name = ref('Chris1993');
let nameReactive = reactive({})
nameReactive.name = name;

console.log(name.value);        // Chris1993
console.log(nameReactive.name); // Chris1993
console.log(name.value === nameReactive.name); // true

7. 요약

이 글은 주로 시작하는 관점에서 reactive/reactive API 사용의 차이점과 사용 프로세스의 여러 문제점을 소개합니다.

간단히 요약하자면:

refs는 일반적으로 객체/배열 유형 데이터에 사용되며 ref를 사용할 필요가 없습니다.

ref는 일반적으로 기본 데이터 유형의 데이터에 사용됩니다. JS에서 읽고 수정할 때 reactive 를 사용해야 하지만 템플릿에서 사용할 때는 그렇지 않습니다.

ref는 깊은 속성 값을 수정하고 응답성을 유지할 수 있습니다.

reactive 반환 값이 소스 개체와 다릅니다.

ref 속성 값은 reactive 값일 수 있습니다.

다음 기사에서는 숙달된 내용을 공유할 것이며 기대하셔도 좋습니다.