Vue 3 Composition API에서 반드시 알아야 할 Ref와 Reactive 차이점

Ref() 및 Reactive()는 Composition API Vue 3에 도입된 반응 속성을 생성하는 새로운 방법입니다.

내부 값으로 초기화하고 변수에 할당할 수 있는 래퍼 개체입니다.

Vue 3에서는 컴포넌트에서 사용하기 전에 원하는 패키지를 먼저 가져와야 합니다.

Up and Running With Vue JS 3 Project Using Vue CLI을 얻는 방법을 이미 알고 있다고 가정합니다.

참조()

일반적으로 설정 함수 내에서 하는 것처럼 변수를 만들고 반환된 개체에 추가할 수 있습니다.

그런 다음 템플릿에서 렌더링합니다.

이것은 작동하지만 반응성이 없습니다.

<template>
   {{count}}
</template>
<script>
export default {
  setup() {
    let count = 0;
    return {
      count,
    };
  },
};
</script>

반응성을 잃지 않고 속성을 생성할 수 있는 방법 중 하나는 ref()를 사용하는 것입니다.

ref() 객체는 내부 값을 받아 반응적이고 변경 가능한 객체를 반환합니다.

String, Boolean, Number 등과 같은 기본 유형 단일 변수에 적합합니다.

속성에 값을 가져오고 설정할 수 있는 내부 값을 가리키는 .value라는 단일 속성이 있습니다.

맨 위에 있는 ref 패키지를 가져옵니다.

import  { ref } from 'vue'; 

count 변수는 내부 값이 0인 ref() 객체를 보유합니다.

let count = ref(0); 

ref() 객체에는 이 경우 0인 내부 값을 가리키는 value라는 단일 속성이 있습니다.

count 변수에 대한 값을 가져오거나 설정하려면 속성 .value를 사용하여 name 변수의 값을 언래핑할 수 있습니다.

console.log(count.value); // 0 get 
count.value = 12 // 12 set

그런 다음 아래와 같이 setup() 함수에 반환하여 카운트 변수를 렌더링할 수 있습니다.

아래 코드에서 알 수 있듯이 count 속성은 .value 속성을 사용하지 않고 템플릿에서 렌더링됩니다.

이는 설정 함수에서 반환된 객체에 ref 객체가 추가되면 템플릿에서 사용할 때 내부 값을 자동으로 풀기 때문입니다.

<template>
   {{count}}
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    let count = ref(0);
    return {
      count,
    };
  },
};
</script>

I use semantic ui CSS framework to style the UI.

count 속성에 대한 반응성을 확인하려면 버튼 요소에 클릭 이벤트를 연결합니다.

그런 다음 count 속성에 1씩 증가하는 숫자를 추가합니다.

<template>
  <div
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;"
  >
    <button class="ui button red" @click="countNumber">Count</button>
    <div class="ui label big">{{ count }}</div>
  </div>
</template>


<script>
import { ref } from "vue";
export default {
  setup() {
    let count = ref(0);

     function countNumber() {
      count.value++;
    }

    return {
      count,
      countNumber
    };
  },
};
</script>

그리고 반응성은 예상대로 작동합니다.

Recommended:
Must-Know Reusable Module Vs Component In Vue 3 Composition API

반응성()

react()는 객체를 가져와 원래 객체의 반응 프록시를 반환하는 래퍼 객체이기도 합니다.

JS Object와 같은 사전 구조 유형에 적합합니다.

상단에서 반응형 패키지를 가져옵니다.

import  { reactive } from 'vue';

이것은 ref 객체와 매우 유사하지만 내부 값은 단일 값이 아닌 JS 객체와 같은 사전 구조의 데이터여야 합니다.

let count = reactive({val: 0}); 

프록시 개체를 사용하면 평소처럼 내부 개체 속성에 액세스할 수 있습니다.

console.log(count.val);

이 개체를 반응형으로 만들려면 버튼 클릭 이벤트 콜백 함수 내에서 val 속성을 1씩 증가시키기만 하면 됩니다.

Continue Reading...