vue中表格数据已更新但界面内容没有更新，修复方案

this.tableData为表格数据，起初表格数据里的结构是固定的比如如下：

tableData:[{name:'名称‘，age:12}]

初始数据虽然是这样的结构，但有时候结构可能会改{name:'名称',age:12,content:'内容'}

可能要多加一个字段。起初用this.$set以及后续又用$nextTick，包括$forceUpdate都无效。

以及重构数组都只是数据变化而界面没有变化。

由于代码的复杂性，tableData数据有可能是其他接口获取的，有可能是其他变量中获取的。

但要理解他们的内存指向就能很好的去解决这个问题，如果用深拷贝，则指向位置变了，从而导致第一次修改会正常渲染，后面修改都无效了。
而vue监听的数据也是内存里的数据变化，当然以上的方法在其他的情况下也是能用的，但如果你的代码过于复杂变量的关联也过于复杂可以试试一下通用方法。代码如下：

let tableData = this.tableData
this.tableData = []
await this.$nextTick()
this.tableData = tableData

以上代码看起来像是废话，其实了解原理之后就能知道为什么这个方法可行了。
首先第一步定义变量let tableData的作用是用于将内存中的数据存储起来。存储起来的目的后面再说。

this.tableData = [] 则是强制清理表格数据。

这样vue即可会自动更新表格

this.$nextTick等表格更新完之后，

this.tableData = tableData 则是又将内存里的数据放到this.tableData中

这样vue又会看到表格数据又变化了，又会自动渲染表格界面。

变量与内存之间的关系不懂的可以看我的以下视频教程
js教程-引用类型存储过程 #数据存储 #web开发 #面试题_哔哩哔哩_bilibili