ref vs reactive

ref와 reactive의 사용법 예제입니다.

Vue에서 변수들의 값이 변경되었을 때 화면이 자동으로 갱신되지 않습니다. 데이터 변경에 반응형으로 자동 갱신을 하기 위해서는 ref 또는 reactive를 사용해야 합니다.

ref 값을 변경할 때는 변수명.value 값을 변경하면 되며, reactive는 일반 구조체처럼 값을 변경하면 됩니다.

<template>
  <h1>ref vs reactive</h1>
  <div>
    <h2>ref: </h2>
    <h2>reactive: , </h2>
  </div>
  <button @click="update">Update</button>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
export default {
  setup() {
    const refData = ref("snowdeer");
    const reactiveData = reactive({
      name: "snowdeer",
      address: "Seoul",
    });

    const update = () => {
      refData.value = "snowdeer-ref";
      reactiveData.name = "snowdeer-reactive";
    };

    return {
      refData,
      reactiveData,
      update,
    };
  },
};
</script>

<style>
</style>

ref, reactive 차이

• ref는 변수명.value로 값을 변경하며, reactive는 데이터 구조체처럼 값을 변경하면 됩니다.
• reactive는 primitive 값에 대해서는 반응형을 갖지 않습니다. 다만 구조체 형태로 선언하면 반응형으로 동작합니다.