vue解决在template标签中使用组件，数据更新了，但组件不重新渲染问题

1. 问题复现

使用elementUI中的el-table，想要在每一个el-table-column中使用同一个组件组件Status，那么代码如下

<el-table-column min-width="8%"
                 label="状态"
                 :index="9">
    <template slot-scope="scope">
        <Status :row="scope.row"></Status>
    </template>
</el-table-column>

在scope数据更新后发现，没有使用到组件的el-table-column更新正常，唯独使用了Status组件的这个column没有更新。猜测是因为Status组件没有重新渲染。

2. 解决思路

联想到在使用v-for时，必须配合key属性来使用，使用key原因如下

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

所以导致问题的原因是：虽然数据时新的，但是Vue认为这些Status组件并没有变，所以没有渲染新的Status

3.解决方法

在组件中添加key属性

<el-table-column min-width="8%"
                 label="状态"
                 :index="9">
    <template slot-scope="scope">
        <Status :row="scope.row" :key="Math.random()"></Status>
    </template>
</el-table-column>