解决Vue数据更新视图不更新的问题 | element-ui 点击显示/隐藏表格中某行的手机号

业务场景：

需要给手机隐藏，点击显示手机号的时候才能看到手机号。

解决思路：

前端控制手机号的显示，（已经通过调接口获取到了用户的手机号信息）

在tableData给每行数据新增加一个isShow的值，当isShow为true时，显示具体的手机号，默认为false.

遇到的问题：

开发过程中遇到给isShow的值改变，但是页面不刷新的问题。

解决方案：

1.使用this.$nextTick() 和this.$forceUpdate();强制刷新页面

//显示手机号

handleShowPhone(index,row){

    this.$nextTick(() => {

    this.tableData[index].isShow = true;

    this.$forceUpdate();

})

2.使用 vm.$set 实例方法

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

<