vue 数据更新了，但在页面上没有展示出来

这是因为有时候 vue 无法监听到数据的变化，导致数据变化但是视图没有变化，也就是数据更新了，但在页面上没有显示出来。

方法一：使用 this.$set() 进行数据更新

this.$set(target, key, value);
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value：重新赋的值

基本语法(对象)：this.$set(要改变的对象，"要改变的对象属性"，"新值")

基本语法(数组)：this.$set(要修改的数组，要修改的数组下标，{ "要修改的数组对象，一个/多个" })

例如：

定义数据

// 对象
obj: { name: "小明", age: 18 }


// 数组对象
arr: [{ name: "小王", age: 18 }, { name: "小张", age: 20 }]
// 普通数组
twoArr: [11, 22, 33]

修改数据

// 对象
this.$set(this.obj, "name", "小刘")
console.log(this.obj) // obj={ name: "小刘", age: 18 }


// 数组对象
this.$set(this.arr, 1, { name: "小王", age: 19 })
console.log(this.arr) // arr=[{ name: "小王", age: 18 }, { name: "小王", age: 19 }]
// 普通数组
this.$set(this.twoArr, 0, 99)
console.log(this.twoArr) // twoArr=[99, 22, 33]

新增数据

// 对象
this.$set(this.obj, "sex", "男")
console.log(this.obj) // obj={ name: "小明", age: 18, sex: "男" }


// 数组对象
const len = this.arr.length
this.$set(this.arr, len, { name: "小紫", age: 18 })
console.log(this.arr) // arr=[{ name: "小王", age: 18 }, { name: "小张", age: 20 }, { name: "小紫", age: 18 }]
// 普通数组
const len2 = this.twoArr.length
this.$set(this.twoArr, len2, 44)
console.log(this.twoArr) // twoArr=[11, 22, 33, 44]

方法二：使用 this.$forceUpdate() 进行强制更新

this.$forceUpdate() 强制更新方法，作用是触发 vue 的 update 方法

this.$forceUpdate(); // 强制更新

updateForm() {
    this.formData.name = "张三";
    this.$forceUpdate(); // 强制更新
},

方法三：更改引用，创建一个新的数组或对象，替换旧的数组或对象，强制更新视图

// 用于数组
this.recordList = [...this.recordList]


// 用于对象
this.recordObj = { ...this.recordObj }

在 el-table 表格中数据发生变化了，表格未重新渲染的问题

解决办法：

在 el-table 中添加一个 key 值，设置成 Boolean 类型，在数据更新后去更新这个 key 值

例子如下：

<el-table :key="refreshTable" :data="tableData" border>
  <el-table-column type="index" label="序号" width="120" align="center" />
  <el-table-column prop="userName" label="姓名" align="center" />
  <el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
      <el-button type="text" @click="toUpdate(scope.row)">修改</el-button>
      <el-button type="text" @click="toDel(scope.row, scope.$index)">删除</el-button>
      <el-button type="text" @click="toDetail(scope.row)">详情</el-button>
    </template>
  </el-table-column>
</el-table>

refreshTable: false, // 表格数据刷新标志

this.refreshTable = !this.refreshTable // 重新渲染表格

在数据更新的后面加上 this.refreshTable = !this.refreshTable 即可