VueJs 2.0 - "sahne" değişimlerini nasıl dinleyeceğiniz

Question

VueJs 2.0 docs içinde props değişikliklerini dinleyecek hiçbir kanca bulamıyorum.

VueJ'lerin onPropsUpdated() veya benzeri kancaları var mı? @wostex önerildiği gibi

Güncelleme

, benim mülkiyet ama hiçbir şey değişmedi watch çalıştı. Ben ana bileşeni child bileşenine aldığı myProp geçirerek

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

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

: Sonra ben özel bir durum var olduğunu fark etti. Sonra watch: {myProp: ...} çalışmıyor.

Answer 1

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

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    text: 'Hello' 
 
    }, 
 
    components: { 
 
    'child' : { 
 
     template: `<p>{{ myprop }}</p>`, 
 
     props: ['myprop'], 
 
     watch: { 
 
     \t 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>

Answer 2

emin değil misiniz çözdük (ve eğer doğru anlamak), ama burada benim fikrim:

Ebeveynim MyProp'u alırsa ve çocuğa geçmesini ve bunu çocukta izlemesini istiyorsanız, ebeveynin myProp kopyası olmalıdır (referans olarak alınmaz).

bu deneyin:

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:

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

aslında bu tür durumlarda karmaşık koleksiyonları üzerinde çalışırken çok dikkatli olmak zorunda