数组/对象中的数据变化，但是页面渲染效果不变（爬坑）

事情是这样发生的，我在一个已经初始渲染过的数组数据中再次添加数据，但是数据渲染不出来，并且我也不能强制刷新页面来渲染，因为新添加的数据都存放在前端中，还未保存到后端。那么我通过我如此如此 这般这般之后，发现了问题所在，并找到了解决方案~啦啦啦

首先先展示下问题代码

   this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        // 验证成功
        let obj = JSON.parse(JSON.stringify(this.formItem))
        this.isAddItem === '1'? this.tableData.push(obj):(this.tableData[this.editItemIndex] = obj)
      })

上面代码中中，我们会发现直接在原有的数据中添加数据，会发现页面中并没有渲染那个数据的，为啥咧？
原理就在vue的深入响应式原理，除了vue文档中说的解决办法之外，我这里介绍了另外种 方便可行的小白方法。

解决思路：那么我们需要自动的,在每一次添加数据之后都能够让页面重新渲染dom结构。
解决方法：初始化一个变量 = 0，然后每次添加之后，那个变量就+1，如此来唤醒dom。

export default {
  data() {
    return {
      // 重新渲染dom标志
      afreshDomKey: 0
    }
  },
  methods: {
    // 保存新增内容
    saveItem() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        // 验证成功
        let obj = JSON.parse(JSON.stringify(this.formItem))
        this.isAddItem === '1'? this.tableData.push(obj) : (this.tableData[this.editItemIndex] = obj)
        // 更改后需要重新渲染dom结构
        this.afreshDomKey += 1
      })
    }}

还有个解决的方法，具体看我另外一篇文章
好了，以上可能很多专业术语用的不好，欢迎大家之处，共同进步哦~