Vue.js - Como observar corretamente dados aninhados

Estou tentando entender como observar corretamente algumas variações de objetos. Eu tenho um componente pai (arquivos .vue) que recebe dados de uma chamada ajax, coloca os dados dentro de um objeto e os usa para renderizar algum componente filho através de uma diretiva v-for, abaixo de uma simplificação da minha implementação:

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

... então <script>tag interna :

 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]);
            }
    });
}

os objetos de item são assim:

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

Agora, dentro do componente "player" do meu filho, estou tentando observar a variação de propriedade de qualquer item e uso:

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

Funciona, mas parece um pouco complicado para mim e eu queria saber se este é o caminho certo para fazê-lo. Meu objetivo é realizar alguma ação sempre que propmudar ou myArrayobter novos elementos ou alguma variação dentro dos existentes. Qualquer sugestão será apreciada.

Você pode usar um observador profundo para isso:

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

Agora, isso detectará quaisquer alterações nos objetos na itemmatriz e adições à própria matriz (quando usada com o Vue.set ). Aqui está um JSFiddle: http://jsfiddle.net/je2rw3rs/

EDITAR

Se você não deseja assistir a todas as alterações no objeto de nível superior e apenas deseja uma sintaxe menos incômoda para assistir diretamente aos objetos aninhados, basta assistir a um computed:

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

Aqui está o JSFiddle: http://jsfiddle.net/oa07r5fw/

Outra boa abordagem e um pouco mais elegante é a seguinte:

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

(Aprendi essa abordagem com @peerbolte no comentário aqui )

Observação profunda do VueJs em objetos filho

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

Como se você deseja assistir a uma propriedade por um tempo e depois desassociá-la?

Ou para assistir a uma propriedade de componente filho da biblioteca?

Você pode usar o "observador dinâmico":

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

O $watchretorna uma função unwatch que irá parar de assistir se for chamado.

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

Além disso, você pode usar a deepopção:

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

Não deixe de dar uma olhada nos documentos

Não vendo isso mencionado aqui, mas também é possível usar o vue-property-decoratorpadrão se você estiver estendendo sua Vueclasse.

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

export default class SomeClass extends Vue {
   ...

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

   ...
}

Outra maneira de acrescentar que eu costumava "hackear" essa solução era fazer isso: configurei um computedvalor separado que simplesmente retornaria o valor do objeto aninhado.

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...
    }
}

Meu problema com a resposta aceita do uso deep: trueé que, ao observar profundamente uma matriz, não consigo identificar facilmente qual elemento da matriz contém a alteração. A única solução clara que encontrei é esta resposta, que explica como criar um componente para que você possa assistir cada elemento da matriz individualmente.

Rastreando itens alterados individuais em uma lista

Se você deseja assistir a todos os itens de uma lista e saber qual item da lista foi alterado, é possível configurar observadores personalizados em cada item separadamente, da seguinte forma:

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
  },
  methods: {
    handleChange (newVal, oldVal) {
      // Handle changes here!
      // NOTE: For mutated objects, newVal and oldVal will be identical.
      console.log(newVal);
    },
  },
  created () {
    this.list.forEach((val) => {
      this.$watch(() => val, this.handleChange, {deep: true});
    });
  },
});

Se sua lista não for preenchida imediatamente (como na pergunta original), você poderá mover a lógica createdpara onde for necessário, por exemplo, dentro do .then()bloco.

Observando uma lista de alterações

Se a sua lista em si é atualizada para ter itens novos ou removidos, desenvolvi um padrão útil que "superficial" observa a própria lista e observa / desativa dinamicamente itens à medida que a lista muda:

// NOTE: This example uses Lodash (_.differenceBy and _.pull) to compare lists
//       and remove list items. The same result could be achieved with lots of
//       list.indexOf(...) if you need to avoid external libraries.

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
    watchTracker: [],
  },
  methods: {
    handleChange (newVal, oldVal) {
      // Handle changes here!
      console.log(newVal);
    },
    updateWatchers () {
      // Helper function for comparing list items to the "watchTracker".
      const getItem = (val) => val.item || val;

      // Items that aren't already watched: watch and add to watched list.
      _.differenceBy(this.list, this.watchTracker, getItem).forEach((item) => {
        const unwatch = this.$watch(() => item, this.handleChange, {deep: true});
        this.watchTracker.push({ item: item, unwatch: unwatch });
        // Uncomment below if adding a new item to the list should count as a "change".
        // this.handleChange(item);
      });

      // Items that no longer exist: unwatch and remove from the watched list.
      _.differenceBy(this.watchTracker, this.list, getItem).forEach((watchObj) => {
        watchObj.unwatch();
        _.pull(this.watchTracker, watchObj);
        // Optionally add any further cleanup in here for when items are removed.
      });
    },
  },
  watch: {
    list () {
      return this.updateWatchers();
    },
  },
  created () {
    return this.updateWatchers();
  },
});

Nenhuma das respostas para mim estava funcionando. Na verdade, se você deseja assistir a dados aninhados com componentes sendo chamados várias vezes. Então, eles são chamados com diferentes adereços para identificá-los. Por exemplo, <MyComponent chart="chart1"/> <MyComponent chart="chart2"/> Minha solução alternativa é criar uma variável de estado adicional vuex, que eu atualizo manualmente para apontar para a propriedade que foi atualizada pela última vez.

Aqui está um exemplo de implementação do Vuex.ts:

export default new Vuex.Store({
    state: {
        hovEpacTduList: {},  // a json of arrays to be shared by different components, 
                             // for example  hovEpacTduList["chart1"]=[2,6,9]
        hovEpacTduListChangeForChart: "chart1"  // to watch for latest update, 
                                                // here to access "chart1" update 
   },
   mutations: {
        setHovEpacTduList: (state, payload) => {
            state.hovEpacTduListChangeForChart = payload.chart // we will watch hovEpacTduListChangeForChart
            state.hovEpacTduList[payload.chart] = payload.list // instead of hovEpacTduList, which vuex cannot watch
        },
}

Em qualquer função Component para atualizar a loja:

    const payload = {chart:"chart1", list: [4,6,3]}
    this.$store.commit('setHovEpacTduList', payload);

Agora em qualquer componente para obter a atualização:

    computed: {
        hovEpacTduListChangeForChart() {
            return this.$store.state.hovEpacTduListChangeForChart;
        }
    },
    watch: {
        hovEpacTduListChangeForChart(chart) {
            if (chart === this.chart)  // the component was created with chart as a prop <MyComponent chart="chart1"/> 
                console.log("Update! for", chart, this.$store.state.hovEpacTduList[chart]);
        },
    },