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获得新元素或现有元素中的一些变化时执行一些操作。任何建议都将不胜感激。

当前回答

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

    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:{
     '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

我个人更喜欢这种简洁的实现方式:

watch: {
  myVariable: {
     handler(newVal, oldVal){  // here having access to the new and old value
     // do stuff
       console.log(newVal, oldVal);
     },
     deep: true,
     /*
         Also very important the immediate in case you need it,
         the callback will be called immediately after the start
         of the observation
     */
     immediate: true 

  }
}

2021-01-13 15:09:09

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类，也可以使用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

如果你想看一段时间的财产，然后取消它怎么办? 或者查看库子组件属性?

你可以使用“动态观察者”:

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()

你也可以使用deep选项:

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

请一定要看一下医生

2018-07-07 18:03:02

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

推荐文章

最新文章

标签