Vue.js- 중첩 된 데이터를 올바르게 watch 하는 방법

질문 : Vue.js-중첩 된 데이터를 올바르게 감시하는 방법

---

소품 변형을 제대로 보는 방법을 이해하려고합니다. ajax 호출에서 데이터를 수신하고 데이터를 객체 내부에 넣고이를 사용하여 v-for 지시문을 통해 일부 하위 구성 요소를 렌더링하는 데 사용하는 상위 구성 요소 (.vue 파일)가 있습니다.

<template>
    <div>
        <player v-for="(item, key, index) in players"
            :item="item"
            :index="index"
            :key="key"">
        </player>
    </div>
</template>

... <script> 태그 내부 :

 data(){
     return {
         players: {}
 },
 created(){
        let self = this;
        this.$http.get('../serv/config/player.php').then((response) => {
            let pls = response.body;
            for (let p in pls) {
                self.$set(self.players, p, pls[p]);
            }
    });
}

항목 개체는 다음과 같습니다.

item:{
   prop: value,
   someOtherProp: {
       nestedProp: nestedValue,
       myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}

이제 내 자식 "플레이어"구성 요소 내에서 항목의 속성 변형을 확인하려고 시도하고 다음을 사용합니다.

...
watch:{
    'item.someOtherProp'(newVal){
        //to work with changes in "myArray"
    },
    'item.prop'(newVal){
        //to work with changes in prop
    }
}

작동하지만 나에게 약간 까다로워 보이는데 이것이 올바른 방법인지 궁금합니다. prop 변경되거나 myArray 가 새 요소 또는 기존 요소 내부의 일부 변형을 가져올 때마다 일부 작업을 수행하는 것입니다. 어떤 제안이라도 감사하겠습니다.

답변

---

이를 위해 딥 워처 를 사용할 수 있습니다.

watch: {
  item: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

item 배열의 객체에 대한 변경 사항과 배열 자체에 대한 추가 사항을 감지합니다 (Vue.set 와 함께 사용할 때). 여기 JSFiddle이 있습니다 : http://jsfiddle.net/je2rw3rs/

편집하다

최상위 객체의 모든 변경 사항을 감시하고 싶지 않고 중첩 된 객체를 직접 감시하는 덜 어색한 구문을 원한다면 대신 computed

var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

JSFiddle은 다음과 같습니다. http://jsfiddle.net/oa07r5fw/

출처 : https://stackoverflow.com/questions/42133894/vue-js-how-to-properly-watch-for-nested-data