Vue子组件状态更新

背景：在一个页面多次重复的使用同一个子组件（比如在列表里根据数据不同重复渲染该子组件）时，由于数据的改变子组件状态未能得到及时的更新

例子如下：

数据以表格的形式显示出来，循环的渲染若干行表格，七中有一列是引入子组件如下所示

<tr v-for="(item,index) in goods_list">
    <td>
        <edit-name :name="item.goods_alias"></edit-name>
    </td>
</tr>

子组件如下：

export default{
    props: ["name"],
    data() {
        return {
            oldName: this.name || "暂无",
        }
},

此时数据如下：

goods_list: [{goods_allias:"连衣裙"},{goods_allias:"上衣"},{goods_allias:"裤子"},]

上衣

然后通过ajax请求得到另外一组数据，数据如下：

goods_list: [{goods_allias:"帽子"},{goods_allias:"手套"},{goods_allias:"袜子"},]

表格看起来没有任何变化，这是因为Vue组件的高效利用，Vue并没有因为数据的变化而将整个子组件从头到尾的重新渲染一遍

而是将利用已有的组件，只更改数据，但是以当前没有检查到数据的变化，所以做如下更改

1.新增watch监听数据的变化

watch: {
    name(val){
        this.oldName = val || "暂无";
    }
}