[javascript] 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
  }
}

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

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

new Vue({
    el: "#myElement",
    data: {
        entity: {
            properties: []
        }
    },
    watch: {
        'entity.properties': {
            handler: function (after, before) {
                // Changes detected. Do work...     
            },
            deep: true
        }
    }
});

this.$watch(
 'object.property', //what you want to watch
 (newVal, oldVal) => {
    //execute your code here
 }
)

var unwatch = vm.$watch('a', cb)
// later, teardown the watcher
unwatch()

this.$watch(
'someObject', () => {
    //execute your code here
},
{ deep: true }
)

import { Watch, Vue } from 'vue-property-decorator';

export default class SomeClass extends Vue {
   ...

   @Watch('item.someOtherProp')
   someOtherPropChange(newVal, oldVal) {
      // do something
   }

   ...
}

data : function(){
    return {
        my_object : {
            my_deep_object : {
                my_value : "hello world";
            }.
        },
    };
},
computed : {
    helper_name : function(){
        return this.my_object.my_deep_object.my_value;
    },
},
watch : {
    helper_name : function(newVal, oldVal){
        // do this...
    }
}