Vue.js -如何正确地监视嵌套数据

我在试着理解如何正确地观察一些道具的变化。我有一个父组件(。Vue文件)，从ajax调用接收数据，把数据放在一个对象中，并使用它来通过v-for指令渲染一些子组件，下面是我的实现的简化:

<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对象是这样的:

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

这是可行的，但对我来说似乎有点棘手，我想知道这是否是正确的方法。我的目标是每次道具改变或myArray获得新元素或现有元素中的一些变化时执行一些操作。任何建议都将不胜感激。

当前回答

这里没有提到，但是如果要扩展Vue类，也可以使用Vue -property-decorator模式。

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

export default class SomeClass extends Vue {
   ...

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

   ...
}

2019-07-07 19:09:21

其他回答

你可以使用深层观察者:

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

现在它将检测对项目数组中对象的任何更改以及对数组本身的添加(当与Vue.set一起使用时)。这是一个JSFiddle: http://jsfiddle.net/je2rw3rs/

EDIT

如果你不想观察顶层对象的每一个变化，只是想要一个不那么尴尬的语法来直接观察嵌套对象，你可以简单地观察一个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/

2017-02-09 10:28:27

下面是一种为嵌套属性编写观察者的方法:

    new Vue({
        ...allYourOtherStuff,
        watch: {
            ['foo.bar'](newValue, oldValue) {
                // Do stuff here
            }
        }
    });

你甚至可以对异步观察者使用这个语法:

    new Vue({
        ...allYourOtherStuff,
        watch: {
            async ['foo.bar'](newValue, oldValue) {
                // Do stuff here
            }
        }
    });

2020-08-24 12:08:30

我发现它也是这样运作的:

watch: {
    "details.position"(newValue, oldValue) {
        console.log("changes here")
    }
},
data() {
    return {
      details: {
          position: ""
      }
    }
}

2020-07-14 14:52:15

另一种更好的方法是:

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

(我从评论里的@peerbolte那里学到了这个方法)

2017-09-20 21:22:08

https://vuejs.org/guide/essentials/watchers.html#deep-watchers

export default {
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // Note: `newValue` will be equal to `oldValue` here
        // on nested mutations as long as the object itself
        // hasn't been replaced.
      },
      deep: true
    }
  }
}

2022-10-29 12:02:32

Vue.js -如何正确地监视嵌套数据

推荐文章

最新文章

标签