Comment écouter les changements des «accessoires»

Dans les documents VueJs 2.0, je ne trouve aucun crochet qui écouterait les propschangements.

Est-ce que VueJs a des crochets similaires onPropsUpdated()ou similaires?

Mettre à jour

Comme l'a suggéré @wostex, j'ai essayé watchma propriété mais rien n'a changé. Puis j'ai réalisé que j'avais un cas particulier:

<template>
    <child :my-prop="myProp"></child>
</template>

<script>
   export default {
      props: ['myProp']
   }
</script>

Je passe myPropque le composant parent reçoit au childcomposant. Alors le watch: {myProp: ...}ne fonctionne pas.

Vous pouvez watchproposer d'exécuter du code lors des modifications d'accessoires:

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'child' : {
      template: `<p>{{ myprop }}</p>`,
      props: ['myprop'],
      watch: { 
      	myprop: function(newVal, oldVal) { // watch it
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child :myprop="text"></child>
  <button @click="text = 'Another text'">Change text</button>
</div>

Avez-vous essayé cela?

watch: {
  myProp: {
    // the callback will be called immediately after the start of the observation
    immediate: true, 
    handler (val, oldVal) {
      // do your stuff
    }
  }
}

https://vuejs.org/v2/api/#watch

Il,

dans mon cas, j'avais besoin d'une solution où chaque fois que les accessoires changeraient, je devais analyser à nouveau mes données. J'étais fatigué de faire un observateur séparé pour tous mes accessoires, alors j'ai utilisé ceci:

  watch: {
    $props: {
      handler() {
        this.parseData();
      },
      deep: true,
      immediate: true,
    },

Le point clé à retenir de cet exemple est d'utiliser deep: trueafin qu'il regarde non seulement $ props mais aussi ses valeurs imbriquées comme par exempleprops.myProp

Vous pouvez en savoir plus sur ces options de surveillance étendue ici: https://vuejs.org/v2/api/#vm-watch

Vous devez comprendre, la hiérarchie des composants que vous avez et comment vous passez des accessoires, votre cas est certainement spécial et n'est généralement pas rencontré par les développeurs.

Composant parent -myProp-> Composant enfant -myProp-> Composant petit-enfant

Si myProp est modifié dans le composant parent, il sera également reflété dans le composant enfant.

Et si myProp est modifié dans le composant enfant, il sera également reflété dans le composant petit-enfant.

Donc, si myProp est modifié dans le composant parent, il sera reflété dans le composant petit-enfant. (jusqu'ici tout va bien).

Par conséquent, dans la hiérarchie, vous n'avez rien à faire, les accessoires seront intrinsèquement réactifs.

Parlons maintenant de monter dans la hiérarchie

Si myProp est modifié dans le composant grandChild, il ne sera pas reflété dans le composant enfant. Vous devez utiliser le modificateur .sync dans l'enfant et émettre un événement à partir du composant grandChild.

Si myProp est modifié dans le composant enfant, il ne sera pas reflété dans le composant parent. Vous devez utiliser le modificateur .sync dans le parent et émettre un événement à partir du composant enfant.

Si myProp est modifié dans le composant grandChild, il ne sera pas reflété dans le composant parent (évidemment). Vous devez utiliser le modificateur .sync enfant et émettre un événement à partir du composant petit-enfant, puis regarder l'accessoire dans le composant enfant et émettre un événement lors de la modification qui est écouté par le composant parent à l'aide du modificateur .sync.

Voyons un peu de code pour éviter toute confusion

Parent.vue

<template>
    <div>
    <child :myProp.sync="myProp"></child>
    <input v-model="myProp"/>
    <p>{{myProp}}</p>
</div>
</template>

<script>

    import child from './Child.vue'

    export default{
        data(){
            return{
                myProp:"hello"
            }
        },
        components:{
            child
        }
    }
</script>

<style scoped>
</style>

Child.vue

<template>
<div>   <grand-child :myProp.sync="myProp"></grand-child>
    <p>{{myProp}}</p>
</div>

</template>

<script>
    import grandChild from './Grandchild.vue'

    export default{
        components:{
            grandChild
        },
        props:['myProp'],
        watch:{
            'myProp'(){
                this.$emit('update:myProp',this.myProp)

            }
        }
    }
</script>

<style>

</style>

Petitchild.vue

<template>
    <div><p>{{myProp}}</p>
    <input v-model="myProp" @input="changed"/>
    </div>
</template>

<script>
    export default{
        props:['myProp'],
        methods:{
            changed(event){
                this.$emit('update:myProp',this.myProp)
            }
        }
    }
</script>

<style>

</style>

Mais après cela, vous n'aurez pas remarqué les avertissements hurlants de vue disant

'Évitez de muter directement un accessoire car la valeur sera écrasée chaque fois que le composant parent sera rendu.'

Encore une fois, comme je l'ai mentionné plus tôt, la plupart des développeurs ne rencontrent pas ce problème, car c'est un anti pattern. C'est pourquoi vous obtenez cet avertissement.

Mais afin de résoudre votre problème (selon votre conception). Je crois que vous devez faire le travail ci-dessus (pirater pour être honnête). Je vous recommande tout de même de repenser votre conception et de la rendre moins sujette aux bugs.

J'espère que ça aide.

Je ne sais pas si vous l'avez résolu (et si je comprends bien), mais voici mon idée:

Si le parent reçoit myProp, et que vous voulez qu'il passe à l'enfant et le regarde dans l'enfant, alors le parent doit avoir une copie de myProp (pas une référence).

Essaye ça:

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'parent': {
      props: ['myProp'],
      computed: {
        myInnerProp() { return myProp.clone(); } //eg. myProp.slice() for array
      }
    },
    'child': {
      props: ['myProp'],
      watch: {
        myProp(val, oldval) { now val will differ from oldval }
      }
    }
  }
}

et en html:

<child :my-prop="myInnerProp"></child>

en fait, vous devez être très prudent lorsque vous travaillez sur des collections complexes dans de telles situations (en passant plusieurs fois)

pour la liaison bidirectionnelle, vous devez utiliser le modificateur .sync

<child :myprop.sync="text"></child>

plus de détails...

et vous devez utiliser la propriété watch dans le composant enfant pour écouter et mettre à jour les modifications

props: ['myprop'],
  watch: { 
    myprop: function(newVal, oldVal) { // watch it
      console.log('Prop changed: ', newVal, ' | was: ', oldVal)
    }
  }

Je travaille avec une propriété calculée comme:

    items:{
        get(){
            return this.resources;
        },
        set(v){
            this.$emit("update:resources", v)
        }
    },

Les ressources sont dans ce cas une propriété:

props: [ 'resources' ]

Pour moi, c'est une solution polie pour obtenir un changement spécifique d'accessoires et créer une logique avec

J'utiliserais propset les computedpropriétés des variables pour créer une logique après avoir reçu les modifications

export default {
name: 'getObjectDetail',
filters: {},
components: {},
props: {
  objectDetail: { // <--- we could access to this value with this.objectDetail
    type: Object,
    required: true
  }
},
computed: {
  _objectDetail: {
    let value = false
    // ...
    // if || do || while -- whatever logic
    // insert validation logic with this.objectDetail (prop value)
    value = true
    // ...
    return value 
  }
}

Donc, nous pourrions utiliser _objectDetail sur le rendu html

<span>
  {{ _objectDetail }}
</span>

ou dans une certaine méthode:

literallySomeMethod: function() {
   if (this._objectDetail) {
   ....
   }
}

Vous pouvez utiliser le mode montre pour détecter les changements:

Faites tout au niveau atomique. Vérifiez donc d'abord si la méthode de surveillance elle-même est appelée ou non en consolant quelque chose à l'intérieur. Une fois qu'il a été établi que la montre est appelée, écrasez-la avec votre logique métier.

watch: { 
  myProp: function() {
   console.log('Prop changed')
  }
}

J'utilise propsles computedpropriétés et les variables si j'ai besoin de créer une logique après pour recevoir les modifications

export default {
name: 'getObjectDetail',
filters: {},
components: {},
props: {
    objectDetail: {
      type: Object,
      required: true
    }
},
computed: {
    _objectDetail: {
        let value = false
        ...

        if (someValidation)
        ...
    }
}

si myProp est un objet, il ne peut pas être modifié normalement. ainsi, la montre ne sera jamais déclenchée. la raison pour laquelle myProp ne doit pas être modifiée est que vous venez de définir quelques clés de myProp dans la plupart des cas. le myProp lui-même est toujours celui-là. essayez de regarder les accessoires de myProp, comme "myProp.a", cela devrait fonctionner.

La fonction de surveillance doit être placée dans le composant enfant. Pas parent.

@JoeSchr a une bonne réponse. voici une autre façon de le faire si vous ne voulez pas «profond: vrai».

 mounted() {
    this.yourMethod();
    // re-render any time a prop changes
    Object.keys(this.$options.props).forEach(key => {
      this.$watch(key, this.yourMethod);
    });
  },