'Sahne' değişiklikleri nasıl dinlenir

In VueJs 2.0 docs ben dinlerdim herhangi kanca bulamıyorum propsdeğişiklikleri.

VueJ'lerin onPropsUpdated()benzer kancaları var mı ?

Güncelleme

@Wostex'in önerdiği gibi, mülküme çalıştım watchama hiçbir şey değişmedi. Sonra özel bir durumum olduğunu fark ettim:

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

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

myPropÜst bileşenin bileşene aldığını geçiyorum child. O zaman watch: {myProp: ...}çalışmıyor.

Sen edebilirsiniz watchsahne sahne değişiklikleri üzerine bazı kod çalıştırmasına:

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>

Bunu denedin mi?

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

O,

benim durumumda herhangi bir sahne değişecek bir çözüme ihtiyacım vardı, verilerimi tekrar ayrıştırmak gerekiyordu. Ben tüm sahne için ayrı gözetleme yapmaktan bıktım, bu yüzden bunu kullandım:

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

Bu örnekten uzaklaşmanın kilit noktası deep: truesadece $ props izlemekle kalmayıp aynı zamanda örneğinprops.myProp

Bu genişletilmiş saat seçenekleri hakkında daha fazla bilgiyi buradan edinebilirsiniz: https://vuejs.org/v2/api/#vm-watch

Anlamanız gerekir, sahip olduğunuz bileşen hiyerarşisi ve destekleri nasıl geçtiğiniz, kesinlikle durumunuz özeldir ve genellikle geliştiriciler tarafından karşılaşılmaz.

Üst Bileşen -myProp-> Alt Bileşen -myProp-> Torun Bileşeni

MyProp üst bileşende değiştirilirse alt bileşene de yansıtılır .

Ve myProp alt bileşende değiştirilirse torun bileşenine de yansıtılacaktır .

Dolayısıyla myProp üst bileşende değiştirilirse torun bileşenine yansıtılacaktır . (çok uzak çok iyi).

Bu nedenle, hiyerarşiden aşağıya bir şey yapmak zorunda değilsiniz sahne doğası gereği reaktif olacaktır.

Şimdi hiyerarşide yukarı çıkmaktan bahsediyoruz

MyProp grandChild bileşeninde değiştirilirse , alt bileşene yansıtılmaz . Alt öğesinde .sync değiştiricisini kullanmanız ve grandChild bileşeninden olayı yaymanız gerekir.

MyProp alt bileşende değiştirilirse , üst bileşene yansıtılmaz . Üst öğede .sync değiştiricisini kullanmanız ve alt bileşenden emit olayı oluşturmanız gerekir.

MyProp grandChild bileşeninde değiştirilirse , üst bileşene (açıkça) yansıtılmaz . .Sync değiştirici child kullanmalı ve torun bileşeninden olayı emit etmeli, sonra alt bileşendeki prop'i izlemeli ve .sync değiştirici kullanılarak üst bileşen tarafından dinlenen bir değişiklik yayınlamalısınız.

Karışıklığı önlemek için bazı kodlar görelim

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>

Ama bundan sonra vue söyleme çığlık uyarıları fark yardımcı olmaz

'Üst bileşen her yeniden oluşturulduğunda değerin üzerine yazılacağından, bir pervaneyi doğrudan değiştirmekten kaçının.'

Daha önce de belirttiğim gibi, geliştiricilerin çoğu bu sorunla karşılaşmıyor, çünkü bu bir anti-desen. Bu yüzden bu uyarıyı alıyorsunuz.

Ama sorununuzu çözmek için (tasarımınıza göre). Yukarıdaki işi etrafta yapmanız gerektiğine inanıyorum (dürüst olmak için kesmek). Hala tasarımınızı yeniden düşünmenizi ve hatalara daha az eğilimli olmasını tavsiye ederim.

Umut ediyorum bu yardım eder.

Çözdüğünüzden (ve doğru anladıysam) emin değilim, ama işte benim fikrim:

Üst öğe myProp'u alıyorsa ve alt öğeye geçmesini ve alt öğede izlemesini istiyorsanız, üst öğenin myProp kopyası olması gerekir (başvuru değil).

Bunu dene:

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

ve html biçiminde:

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

aslında bu tür durumlarda karmaşık koleksiyonlar üzerinde çalışırken çok dikkatli olmalısınız (birkaç kez geçerek)

iki yönlü ciltleme için .sync değiştiricisini kullanmanız gerekir

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

daha fazla detay...

ve değişiklikleri dinlemek ve güncellemek için alt bileşende watch özelliğini kullanmanız gerekir

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

Ben bilgisayar gibi bir özellik ile çalışır:

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

Kaynaklar bu durumda bir özelliktir:

props: [ 'resources' ]

Benim için bu, belirli bir pervane değişikliklerini almak ve onunla mantık yaratmak için kibar bir çözümdür

Değişiklikleri aldıktan sonra mantık oluşturmak için propsve değişkenler computedözelliklerini kullanırdım

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

Yani, hobml render üzerinde _objectDetail kullanabiliriz

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

veya bazı yöntemlerde:

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

Değişiklikleri tespit etmek için izleme modunu kullanabilirsiniz:

Her şeyi atom seviyesinde yapın. Bu nedenle, önce içinde bir şey teselli ederek saat yönteminin kendisinin çağrılıp çağrılmadığını kontrol edin. Saatin kurulduktan sonra, iş mantığınızla parçalayın.

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

Değişiklikleri almak için sonra mantık oluşturmam gerekiyorsa propsve değişkenleri kullanıyorumcomputed

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

        if (someValidation)
        ...
    }
}

myProp bir nesne ise, normalde değiştirilemez. bu yüzden saat asla tetiklenmeyecek. myProp'un değiştirilmemesinin nedeni, çoğu durumda myProp'un bazı anahtarlarını ayarlamanızdır. myProp'ın kendisi hala o. "myProp.a" gibi myProp aksesuarlarını izlemeye çalışın.

Saat işlevi, Çocuk bileşenine yerleştirilmelidir. Üst öğe değil.

@JoeSchr'ın iyi bir cevabı var. 'derin: doğru' istemiyorsanız bunu yapmanın başka bir yolu.

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