깊은 감시자 질문

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

Watch, WatchEffect

작성

수정됨

<template>
  <div></div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const person = reactive({
      name: '홍길동',
      age: 30,
      obj: { count: 0 },
    });

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

    return { person };
  },
};
</script>

<style lang="scss" scoped></style>

getter 형태로 watch 첫번째 인자를 넘겼기 때문에 개발자 도구에서 obj 의 count 프로퍼티를 증감했을 때에 감시에 걸리지 않아서 콘솔 출력이 되지 않는다는 것을 확인했습니다.

하지만 개발자 도구에서 obj 자체를 변경했을 때 감시에 걸려서 콘솔 출력이 될 것이라고 예상했지만 콘솔 출력이 되지 않았고 오히려 typeError 가 발생했습니다.

이유가 무엇인지 궁금합니다.

vue.js

답변 2

짐코딩

지식공유자

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

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

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

Vue의 Proxy 시스템을 우회하여 할당
reactive 연결이 깨지면서 내부적으로 Proxy 처리 오류 발생
watch의 newValue/oldValue 접근 시 TypeError 발생

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

인프런 AI 인턴

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

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

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

reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요
- 이 게시물에서는 reactive 객체의 구조가 변경될 때, 즉 객체 자체가 새로운 참조로 변경되는 경우 기존 watch가 감지하지 못하는 문제에 대해 다룹니다. 이는 Vue.js에서 객체의 참조가 변경될 때 일반적으로 감지하지 못하는 이유와 같습니다.
watch강의 질문
- 이 질문에서는 깊은 감시자 옵션을 잘못 설정하여 발생하는 문제를 설명합니다. watch 함수의 첫 번째 인자로 객체의 프로퍼티를 감시할 때 깊은 감시가 필요한 경우가 많습니다.

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

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

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

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

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

인프런 커뮤니티 질문&답변

깊은 감시자 질문