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

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

子组件：

<template>
    <div>
        <p>姓名： {{user.name}}p>
        <p>年龄： {{user.age}}p>
    div>
template>
<script>export default {

    props: {

        user: Object

    }

}script>

父级组件：

<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: 'wenzi',

                    age: 27

                },

                {

                    name: '蚊子',

                    age: 26

                }

            ]

        };

    }

}script>

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

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

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

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

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

解决方案2： watch #

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

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