[Vue.js] 분해 할당으로 인한 반응성 연결 끊김

<template>
  <div>
    <p>현재 count: {{ state.count }}</p>
    <button @click="increaseCount">count 증가</button>
    <p>원래 상태에 영향을 주지 않는 count: {{ count }}</p>
    <button @click="callFunction">함수 호출</button>
  </div>
</template>

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

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

// 분해 할당으로 가져온 count 변수
let { count } = state;

// count를 증가시키는 함수
const increaseCount = () => {
  count++;
};

// 함수 호출
const callFunction = () => {
  // 전체 객체를 전달하여 반응성을 유지합니다.
  callSomeFunction(state.count);
};

// 예시 함수
function callSomeFunction(value) {
  console.log('함수가 호출되었습니다. 전달된 값:', value);
}
</script>

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

Vue.js에서 반응성 있는 객체를 분해 할당하여 가져올 때, 해당 변수와 원본 객체 간의 반응성 연결이 끊어집니다.

위의 예제는 반응성 있는 상태 객체를 생성하고, 그 객체를 분해 할당하여 count 변수를 가져오는 예제입니다. count를 증가시키는 함수를 호출하면, 이는 원래 상태에는 영향을 주지 않습니다. 또한 함수를 호출할 때도 state.count를 전달하여 반응성을 유지합니다.

분해 할당을 통해 가져온 변수는 해당 변수와 원본 객체 간의 반응성 연결이 끊기므로, 이를 통해 변수를 변경하더라도 원래 상태 객체에는 영향을 주지 않습니다. 하지만 전체 객체를 전달하여 함수를 호출하면 Vue는 해당 객체의 변경 사항을 추적하여 반응성을 유지합니다.