Vue中的嵌套组件中数据无法实时更新的问题

Vue中的嵌套组件中数据无法实时更新的问题

我们在工作经常会有组件嵌套的情况，内部组件通过获取传递进来的数据。不过在实际应用中发现，外部组件的数据更新后，内部组件的数据不会实时更新：

子组件：

<!-- unit.vue -->
<template>
    <div>
        <p>姓名： {{user.name}}</p>
        <p>年龄： {{user.age}}</p>
    </div>
</template>
<script>
export default {
    props: {
        user: Object
    }
}
</script>

父级组件：

<!-- list.vue -->
<template>
    <div>
        <unit v-for="(item, index) in users" :key="index" :user="item"></unit>
    </div>
</template>
<script>
import unit from './unit';
export default {
    components: {
        unit
    },
    data(){
        return {
            users: [
                {
                    name: 'xiaoA',
                    age: 27
                },
                {
                    name: 'xiaoB',
                    age: 26
                }
            ]
        };
    }
}
</script>

这么个组件运行是没有问题的，能够正确渲染出一个列表。

可是如果list.vue中的发生变化时，unit.vue里的数据是不会再次更新的。这样的情况怎么解决呢？

解决方案1： 将两个组件合并成一个组件

最简单、最粗糙的方式，将两个组件合并成一个组件，在一个组件内进行数据更新，就不会出现组件之间数据不同步的问题了。

不过这样的的问题就是，当前组件会很大，本来我们就是为了解耦功能，才要拆分组件的，不能再次回到过去吧。

解决方案2： watch

在unit.vue组件中，使用watch监听某个属性的变化，这样外部的数据发生变化时，watch就能监听到：

watch: {
    'user.age': function(val, oldVal){
        this.render(); // user中的age属性发生变化时，调用render方法
    }
}