子組件使用created或者mounted通常只能在組件初始化的時候，獲取父組件傳過來的props數據。

父組件props數據發生變化，子組件默認無法感知，因此需要手動實現子組件監聽父組件變化的功能。

一般的值類型數據，可以直接使用watch監聽：

watch: {
    msg(newVal, oldVal){//對引用類型的值無效
        console.info(‘value changed ‘, newVal)
    }
}

引用類型，普通watch方法，無法監聽到引用類型內部的變化。

解決此問題，可以在父組件中將變化的對象變成一個新的對象，自主實現深拷貝，例如：

methods: {
    addAge(){
        this.child.age ++;
        this.child = JSON.parse(JSON.stringify(this.child));
    }
}

但是這樣做不是很優雅，vue提供了方便的深拷貝的方式去監聽引用類型值的變化，例如：

watch: {
    msg: {
        handler(newVal, oldVal) {
            console.info(‘value changed 2‘, newVal)
        },
        deep: 
 
true
    }
}

完整例子：

1. 父組件Game.vue向子組件傳遞props值

<template>
    <div class="game">
        <button @click="addAge">birthday++</button>
        <DNF :msg="child"></DNF>
    </div>
</template>
<script>
import DNF from ‘./DNF‘
export default
 
 {
    name: ‘Game‘,
    components: {
        DNF
    },
    data () {
        return {
            child:{name:‘dnf‘,age:18},
        }
    },
    methods: {
        addAge(){
            this.child.age ++;
            //this.child = JSON.parse(JSON.stringify(this.child));
        }
    }
}
</script>

2. 子組件DNF.vue 使用watch監聽父組件中msg的變化，因為msg是一個object，因此設置 deep:true。

<template>
    <div class="dnf"></div>
</template>
<script>
export default {
    name: ‘DNF‘,
    props: ["msg"],
    watch: {
        msg(newVal, oldVal){//對引用類型的值無效
            console.info(‘value changed 1‘, newVal)
        },
        msg: {
            handler(newVal, oldVal) {
                console.info(‘value changed 2‘, newVal)
            },
            deep: true
        }
    },
}
</script>

官方文檔：https://cn.vuejs.org/v2/guide/computed.html#偵聽器

初識vue 2.0（13）：子組件使用watch監聽父組件變化