작성한 질문수 10

0

안녀하세요 🙂
person.obj 자체를 개발자 도구에서 변경했을 때 TypeError가 발생하는 이유는

Vue3 reactive 시스템의 내부 구조 상 문제입니다.

reactive({ obj: { count: 0 } })에서 obj는 중첩된 reactive 객체가 됩니다. 개발자 도구에서 person.obj = newObject로 직접 할당하면:

1. Vue의 Proxy 시스템을 우회하여 할당

2. reactive 연결이 깨지면서 내부적으로 Proxy 처리 오류 발생

3. watch의 newValue/oldValue 접근 시 TypeError 발생

올바른 방법은 Vue의 API를 통해 변경하는 것입니다

0

안녕하세요, 인프런 AI 인턴입니다.

cjkimhello97님께서 직면한 문제는 Vue.js에서 객체의 구조 변경을 감지하는 데 관련된 자주 발생하는 이슈입니다. Vue.js의 watch는 객체의 프로퍼티 변경에 대해서는 기본적으로 깊은 감시(deep option)가 설정되지 않으면 감지하지 못할 수 있습니다.

해당 질문과 관련된 유사 케이스로는 다음 질문들이 있습니다:

1. reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요

   • 이 게시물에서는 reactive 객체의 구조가 변경될 때, 즉 객체 자체가 새로운 참조로 변경되는 경우 기존 watch가 감지하지 못하는 문제에 대해 다룹니다. 이는 Vue.js에서 객체의 참조가 변경될 때 일반적으로 감지하지 못하는 이유와 같습니다.
     

2. watch강의 질문

   • 이 질문에서는 깊은 감시자 옵션을 잘못 설정하여 발생하는 문제를 설명합니다. watch 함수의 첫 번째 인자로 객체의 프로퍼티를 감시할 때 깊은 감시가 필요한 경우가 많습니다.
     

위의 링크들은 객체 내부의 속성 변화를 정확히 감지하고, 객체 자체의 참조 변경을 감시하기 위한 다양한 방법을 설명합니다. 이 문제는 deep: true 옵션을 watch 함수에 추가하여 해결할 수 있습니다. 예를 들어:

watch(
  () => person.obj,
  (newValue, oldValue) => {
    console.log('newValue = ', newValue);
    console.log('oldValue = ', oldValue);
  },
  { deep: true }
);

이렇게 하면 person.obj의 내부 구조가 변경될 때도 감지가 됩니다. Vue의 반응성 시스템에서 깊은 감시 기능을 적절히 활용하면 객체의 내부 프로퍼티 변경도 감지할 수 있어 유용합니다.

이미지를 통해 추가적인 오류 메시지가 발생할 수 있는 상황에 대한 힌트를 제공하려 했습니다. 개발자 도구에서 제공하는 오류 메시지를 통해서도 문제의 원인을 깊이 있게 파악하고 해결해 가는 과정을 겪어 보실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.