Vue解决data数据改变，视图不更新的问题

背景：

项目中遇到el-input 数据绑定时，输入框不显示问题（为了解决了数据更新但视图没更新的问题）

原因：

有时候el-input由于​​​​​​​嵌套的层级比较多，数据双向绑定实现不了,从而导致输入框不显示问题。

其根本在于vue示例中data的数据被加工为响应式的，如果再往这个数据中添加新属性，显然，新的属性没有被加工成响应式数据，从而导致视图不更新。

办法：

1.降低嵌套层数

2.使用this.$forceUpdate()方法强制刷新

// 监听input事件
<el-input v-model="loginForm.username" 
placeholder="请输入用户名" 
@input="change($event)">
</el-input>

// 在method方法中写
    // 多层嵌套无法输入解决方法
    change(e) {
      this.$forceUpdate()
    },

3.使用this.$set(this.data,”key”,value’)给对象添加属性

注意：$forceUpdata()、$set()和 $nextTick() 的区别

1.$forceUpdata()、$set()都用于更新视图

2.$nextTick()并不是更新视图，而是等数据视图更新之后再执行某些操作