Jak słuchać zmian „rekwizytów”

w VueJs 2.0 nie mogę znaleźć żadnych haków, które mogłyby nasłuchiwać propszmian.

Czy VueJ ma takie haki? onPropsUpdated() lub podobne?

Aktualizacja

Jak sugerował @wostex, próbowałem watchmojej własności, ale nic się nie zmieniło. Potem zdałem sobie sprawę, że mam specjalny przypadek:

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

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

Podaję, myPropże składnik nadrzędny odbiera childskładnik. To watch: {myProp: ...}nie działa.

Możesz watchrekwizyty wykonać kod po zmianach rekwizytów:

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>

Próbowałeś tego?

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

On,

w moim przypadku potrzebowałem rozwiązania, w którym za każdym razem zmieniałyby się rekwizyty, musiałem ponownie przeanalizować moje dane. Byłem zmęczony robieniem osobnego obserwatora dla wszystkich moich rekwizytów, więc użyłem tego:

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

Kluczowym punktem, który należy odnieść od tego przykładu, jest użycie deep: true więc nie tylko ogląda rekwizyty $, ale także zagnieżdżone wartości, takie jak npprops.myProp

Możesz dowiedzieć się więcej o tej rozszerzonej opcji oglądania tutaj: https://vuejs.org/v2/api/#vm-watch

Musisz zrozumieć, jaką masz hierarchię komponentów i sposób przekazywania rekwizytów, na pewno twoja sprawa jest wyjątkowa i zwykle nie spotykana przez programistów.

Komponent nadrzędny -myProp-> Komponent podrzędny -myProp-> Komponent wnuka

Jeśli myProp zostanie zmieniony w komponencie nadrzędnym, zostanie to odzwierciedlone w komponencie podrzędnym.

A jeśli myProp zostanie zmieniony w komponencie potomnym, zostanie to odzwierciedlone w komponencie wnuka.

Jeśli więc myProp zostanie zmieniony w komponencie nadrzędnym, zostanie to odzwierciedlone w komponencie wnuka. (na razie w porządku).

Dlatego w hierarchii nie musisz nic robić, rekwizyty będą z natury reaktywne.

Teraz mówimy o awansie w hierarchii

Jeśli myProp zostanie zmieniony w składniku grandChild, nie zostanie odzwierciedlony w komponencie potomnym. Musisz użyć modyfikatora .sync w potomku i emitować zdarzenie ze składnika grandChild.

Jeśli myProp zostanie zmieniony w komponencie potomnym, nie zostanie odzwierciedlony w komponencie macierzystym. Musisz użyć modyfikatora .sync w obiekcie nadrzędnym i wyemitować zdarzenie ze składnika potomnego.

Jeśli myProp zostanie zmieniony w składniku grandChild, nie zostanie odzwierciedlony w składniku nadrzędnym (oczywiście). Musisz użyć podrzędnego modyfikatora .sync i wyemitować zdarzenie z komponentu wnuka, a następnie obejrzeć prop w komponencie podrzędnym i wyemitować zdarzenie przy zmianie, które jest nasłuchiwane przez komponent nadrzędny za pomocą modyfikatora .sync.

Zobaczmy trochę kodu, aby uniknąć zamieszania

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>

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

Ale po tym nie pomożesz zauważyć krzyczących ostrzeżeń mówiących vue

„Unikaj bezpośredniego modyfikowania rekwizytu, ponieważ wartość zostanie nadpisana za każdym razem, gdy element nadrzędny zostanie ponownie renderowany”.

Ponownie, jak wspomniałem wcześniej, większość programistów nie napotyka tego problemu, ponieważ jest to anty-wzór. Dlatego otrzymujesz to ostrzeżenie.

Ale w celu rozwiązania problemu (zgodnie z projektem). Uważam, że musisz wykonać powyższe czynności (włamać się szczerze mówiąc). Nadal zalecam, aby przemyśleć swój projekt i uczynić go mniej podatnym na błędy.

Mam nadzieję, że to pomoże.

Nie jestem pewien, czy to rozwiązałeś (i czy dobrze rozumiem), ale oto mój pomysł:

Jeśli rodzic otrzyma myProp, a Ty chcesz przekazać go dziecku i obejrzeć w dziecku, wówczas rodzic musi mieć kopię myProp (bez referencji).

Spróbuj tego:

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

i w html:

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

tak naprawdę musisz być bardzo ostrożny podczas pracy nad złożonymi kolekcjami w takich sytuacjach (przekazywanie kilka razy)

do wiązania dwukierunkowego należy użyć modyfikatora .sync

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

więcej szczegółów...

i musisz użyć właściwości watch w komponencie potomnym, aby nasłuchiwać i aktualizować wszelkie zmiany

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

Pracuję z obliczoną właściwością, taką jak:

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

Zasoby są w tym przypadku własnością:

props: [ 'resources' ]

Dla mnie jest to grzeczne rozwiązanie, aby uzyskać jedną konkretną zmianę (rekwizyty) i stworzyć z niej logikę

Chciałbym użyć propsi computedwłaściwości zmiennych , aby utworzyć logikę po, aby otrzymać zmiany

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

Możemy więc użyć _objectDetail na renderowaniu HTML

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

lub w jakiś sposób:

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

Możesz użyć trybu zegarka do wykrywania zmian:

Rób wszystko na poziomie atomowym. Więc najpierw sprawdź, czy sama metoda oglądania jest wywoływana, czy nie, pociesząc coś w środku. Po ustaleniu, że zegarek jest wywoływany, zniszcz go logiką biznesową.

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

Używam propsi zmiennych computedwłaściwości, jeśli muszę utworzyć logikę po, aby otrzymać zmiany

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

        if (someValidation)
        ...
    }
}

jeśli myProp jest obiektem, nie można go normalnie zmienić. więc zegarek nigdy się nie uruchomi. powodem, dla którego myProp się nie zmienia, jest to, że w większości przypadków po prostu ustawiasz niektóre klucze myProp. sam myProp wciąż jest tym jedynym. spróbuj oglądać rekwizyty myProp, takie jak „myProp.a”, powinno działać.

Funkcja zegarka powinna zostać umieszczona w komponencie potomnym. Nie rodzicem.

@JoeSchr ma dobrą odpowiedź. oto inny sposób na zrobienie tego, jeśli nie chcesz „głęboko: prawda”.

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