[vuejs] deep watch가 반환한 이전 값이 현재 값과 동일한 경우

 

state.thisYearTypeR은 객체

해당 데이터의 변경을 감지할 때, 변경 전 데이터가 필요한 경우가 있다.

 

 

<잘못된 방법>

const func = (value, preVal) => {
  console.log('현재값', value);
  console.log('이전값', preVal);
};
    
watch(
  () => state.thisYearTypeR,
  async (val, preVal) => {
    await func(val, preVal);
  },
  {
    deep: true,
  }
);

위와 같이 deep 플래그를 이용하여 데이터 감지 시, 동일한 배열을 참조하기 때문에 새 값과 동일하다.

 

 

<문제 해결>

const func = (value, preVal) => {
  console.log('현재값', value);
  console.log('이전값', preVal);
};
    
watch(
  () => ({ ...state.thisYearTypeR }),
  async (val, preVal) => {
    await func(val, preVal);
  },
  {
    deep: true,
  }
);

value {month1: 13, month2: 1, month3: 1, month4: 1, month5: 11, …}
preVal {month1: 3, month2: 1, month3: 1, month4: 1, month5: 11, …}