Вью.js-как правильно следить за вложенными данными

Я пытаюсь понять, как правильно следить за некоторыми вариациями опоры. У меня есть родительский компонент (.файлы vue), которые получают данные из вызова ajax, помещают данные внутри объекта и используют его для визуализации некоторого дочернего компонента через директиву v-for, ниже упрощения моей реализации:

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

... тогда внутрь!--4--> tag:

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

теперь, внутри моего дочернего компонента "player" я пытаюсь следите за изменением свойств любого элемента, и я использую:

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

это работает, но мне кажется немного сложным, и мне было интересно, правильно ли это сделать. Моя цель состоит в том, чтобы выполнять некоторые действия каждый раз prop изменения или myArray получает новые элементы или некоторые изменения внутри существующих. Любое предложение будет оценено.

142
javascript vue-component vue-resource vue.js

3 ответов

можно использовать глубокий наблюдатель для этого:

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/

238

еще один хороший подход и один, который немного более элегантный, выглядит следующим образом:

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

(я узнал этот подход от @peerbolte в комментарий )

161

как, если вы хотите посмотреть свойство на некоторое время, а затем отменить его?

или посмотреть свойство дочернего компонента библиотеки?

вы можете использовать "динамический наблюдатель":

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

на $watch возвращает функцию unwatch, которая прекратит просмотр, если она будет вызвана.

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

также вы можете использовать :

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

пожалуйста, не забудьте взглянуть для docs

1