vue-计算属性-深度监听用到的属性

<div id="app">
    <h1>{{ childrenName }}</h1>
<button @click="handleClickChange">change</button>
</div>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            person: {
                name: 'tom',
                children: [
                    { name: 'jerry' },
                    { name: 'jack' }
                ]
            }
        },
        methods: {
            handleClickChange() {
                this.person.children[0].name = 'rose'
            }
        },
        // 计算属性是深度监听用到的属性
        computed: {
            childrenName() {
                return this.person
            }
        }
    })
</script>

点击前

点击后