问题

在左树右表的页面中，左侧点击不同的节点，右侧表头会改变。但在某些情况下，数据中表头顺序改变了，但视图中表头位置却没变。如下图所示：

尝试

数据变了但视图未更新，猜测是vue更新机制导致的，于是把表头数组的赋值改为 $set，无效；

猜测是右侧表格组件复用导致数据未更新，（但其实 vue-dev-tool 中能看到 数据已经更新了），于是把表格组件加上 key 值，无效；

解决

怀疑是表头渲染的原因，查找资料发现，是因为 v-for 循环表头数组时，key 值设为了表头属性的字段，但切换左侧树节点后，表头属性的字段没变。因此，视图更新不生效。修改前后代码对比如下：

总结

vnode 视图更新机制：对比元素的 key 值，若有改变则更新，否则保留。

因此，以上的更新过程是：更新前，第一个表头的 key 值为 quancheng，在更新后的表头数组中寻找 key 值为 quancheng的元素，若能找到，则第一个表头的视图位置不更新，反之更新。