[Vue.js] watch로 두개 이상의 값 변경 감지

두 개 이상의 값 변경 감지

둘 이상의 값에 대한 변경을 감지하여 하나의 값이라도 변경이 일어나면 특정 메서드를 실행하는 코드가 필요했다. 아래 코드는 computed에 임의로 정의한 data1(), data2()의 반환 값을 watch에서 감지하여 둘 중 값이 하나라도 변경되면 동일한 handleUpdate() 함수가 호출되도록 작성한 것이다. 주의할 점은 감시하는 값이 객체인 경우에는 "deep" 속성을 추가해야 변경을 감지할 수 있다.

computed: {
  data1() {
    return this.$store.state.data1; // vuex 상태 값1
  },
  data2() {
    return this.$store.state.data2; // vuex 상태 값2
  }
},
watch: {
  data1: 'handleUpdate',
  data2: {
    handler: 'handleUpdate',
    deep: true // 상태 값이 객체인 경우 속성 값 변화 감지
  }
},
methods: {
  handleUpdate() {
    this.update1();
    this.update2();
  },
  update1() {
    console.log("업데이트1");
  },
  update2() {
    console.log("업데이트2");
  }
}

---

2024-09-27 추가

watch를 사용하지 않더라도 양방향 데이터 바인딩(클래스 바인딩 등) 된 경우 Vuex의 state가 변경되면 자동으로 화면에 리렌더링 된 한다. 하지만 이번에 자동으로 리렌더링 되지 않는 문제가 있었다. 그 이유는 아래와 같은 방식으로 상태 값을 변경했기 때문이다. Vuex는 mutations를 통해서 상태를 업데이트해야 Vue가 이를 감지할 수 있다.

this.$store.state.data = "변경할 값"; // 이렇게 변경하면 값은 변경되지만 리렌더링이 되지 않는다.