reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요
568
작성한 질문수 25
<template>
<button @click="objChange">obj 바꾸기</button>
</template>
<script>
import { reactive, ref, watch } from 'vue';
export default {
setup() {
const x = ref(0);
let obj = reactive({
count: 0,
message: 'hi',
object: { num: 0 },
array: [1, 2, 3],
ref: x,
});
const objChange = () => {
console.log(obj);
obj = { a: 1 };
console.log(obj);
};
watch(obj, (newValue, oldValue) => {
console.log('newValue: ', newValue);
console.log('oldValue: ', oldValue);
});
return { x, obj, objChange };
},
};
</script>
버튼을 눌러서 obj 값을 {a : 1} 로 바꾸면 왜 watch 콜백함수가 실행이 안되나요?
{a : 1}이 반응형 객체가 아니어도 처음에 바뀔때는 실행 될 거라고 생각했습니다
혹시나 해서 obj를 반응형 객체로 바꿔도 watch 콜백함수가 실행이 안되는데 왜 변화를 인지 못 하나요?
답변 1
1
안녕하세요.
이유는 obj = { a: 1 }; 해당 코드에서 obj에 새로운 값이 할당 되었을 뿐 기존 반응형 상태에는 변화가 없기 때문입니다. 즉, obj(Reference Type)에 새로운 메모리 주소가 할당 됩니다.
기존 반응형 객체에 변화를 주기 위해서는 기존 객체에 obj.a = 1와 같이 기존 반응형 객체에 할당 해야 합니다.
0
"reactive 함수에 객체를 넣음으로써 반응형 상태를 선언할 수 있다"
let obj = reactive( { count : 0 })
1) 이러면 obj 객체 자체 { count : 0 } 는 반응형 상태가 아니고
obj.count만 반응형 상태인 건가요?
2) 그렇다면 객체 자체의 변화를 감지하고 싶다면 객체의 속성으로 객체를 넣는 방법밖에 없는 건가요?
outObj = reactive ( { inObj : { count : 0 } } )
0
안녕하세요. 반응형 상태를 떠나서
자바스크립트 참조타입(Reference Type)에 대한 이해가 필요할 것 같아요.
// obj1 이라는 변수를 선언 했습니다.
let obj1;
// obj1에 객체를 할당 했습니다. 이때 obj1은 객체를 가리키고 있는 메모리 주소 "값"을 갖고 있습니다.
obj1 = { count: 0 };
// obj1이 갖고 있는 주소값을 obj2에도 할당 합니다.
// 그러면 obj1과 obj2는 같은 객체를 가리키고 있습니다. (즉, 같은 값을 갖음)
let obj2 = obj1;
// 이때 obj2에 다른 값을 할당합니다.
obj2 = { message: 'hello' };
// obj2 변수에 다른 값을 할당 했을 뿐
// 여전의 obj1 = { count: 0 }; 같을 갖고 있습니다.
// 즉, 객체 값(속성)의 변화가 없습니다.이렇듯
let obj = reactive( { count : 0 })
obj = { m: 'hello' };
// 이러한 할당은 단순히 obj변수에 "새로운 객체"를 할당한 것입니다.만약 객체 자체의 값의 변화를 감지하고 싶다면 ref함수로 선언하시면 될 것 같습니다.
npm init vue@3.1.9
0
36
2
크롭 웹스토어 vue devtools 설치 관련
0
38
1
snippets 작성하는 부분 설명이 있었나요?
0
47
2
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
0
52
2
소스 공유 어디서 해야하는지 궁금합니다
0
60
2
component 등록과 사용
0
57
2
강의교안
0
56
2
eslint 룰 관련 질문이 있습니다.
0
63
2
npm init -y 명령어 실행에 관한 질문
0
153
2
volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.
0
167
2
깊은 감시자 질문
0
88
2
정리된 내용
0
153
2
화면이 왜 이렇게 뜨는걸까요?
0
184
2
왜 다르게 뜰까요..?ㅠㅠ
0
155
2
npm init vue , npm create vue@latest 명령 오류
0
289
2
강의를 듣다보니 궁금한 점 질문드립니다.
0
141
2
watch강의 질문
0
153
1
강의 듣다가 질문드립니다.
0
119
1
이벤트 처리 부분 강의 실습
0
140
2
v-pre는 설명이 없나요?
0
152
2
AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다
0
146
1
개발자도구 Vue 탭 관련 문의
0
240
2
강의를 인텔리제이로 수업따라가도 되져?
0
177
2
API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?
3
274
2