Vue props [watch 작동 하지 않는 현상]

부모 컴포넌트에서 props으로 Object 형식으로 값을 넘겨 줄때

Object형식 데이터

1. Object를 전체로 넘겨주는 경우

//부모 컴포넌트
<UserInfoComponent 
 :data="data"
 />
 
 ///////////////////////////////////
 //자식 컴포넌트
 watch:{
 	data(){
    	console.log('감지')
    }
 }

Object 하나를 다 던져 주고 watch로 잡는다면

data.name이 변경이되어도 감지가 되지않는다.

 

2. Object 안에 변수 하나하나를 props로 내려주는 경우

 //부모 컴포넌트
 <UserInfoComponent 
 :name="data.name"
 :age="data.age"
 />
 
 ///////////////////////////////////
 //자식 컴포넌트
 watch:{
 	name(){
    	console.log('name 감지')
    },
    age(){
    	console.log('age 감지')
    }
 }

watch가 data.name 또는 data.age 값이 변경시 감지가 된다.