[Vue.js] 반응성 연결이 끊긴 객체

<template>
  <div>
    <p>현재 count: {{ state.count }}</p>
    <button @click="updateCount">count 변경</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

// 반응성 있는 상태 객체를 생성합니다.
let state = reactive({ count: 0 });

// count를 업데이트하는 함수
const updateCount = () => {
  // 상태 객체를 새로운 객체로 덮어씁니다.
  state = reactive({ count: 1 });
};
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
</style>

Vue.js에서 반응성 있는 객체를 생성할 때, 그 객체를 다른 값으로 덮어쓰면 이전 객체와의 반응성 연결이 끊어집니다.

위의 예제는 반응성 있는 상태 객체를 생성하고, 버튼을 클릭하면 해당 객체를 다른 객체로 덮어쓰는 예제입니다. 초기에는 count가 0인 상태 객체를 생성하고, 버튼을 클릭하면 count가 1인 새로운 상태 객체로 덮어씁니다.

이러한 경우, Vue는 이전 상태 객체와 새로운 상태 객체 간의 반응성 연결을 유지하지 않습니다. 따라서 이전 상태 객체의 변경 사항을 Vue가 추적하지 않습니다. 이를 통해 상태 관리를 보다 유연하게 할 수 있습니다.