[JavaScript知识库]Vue.set()和this.$set()介绍

参考文章 添加链接描述
今天在开发过程中遇到一个问题：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去

错误代码示例：导致input中使用v-model失效，输入的内容不展示需要失焦才展示

this.bigProgressBarNum[this.bigProgressBarNum.length] = {
        label: `第${this.bigProgressBarNum.length + 1}档`,
        visible: false,
        barValue: `第${this.bigProgressBarNum.length + 1}档`,
        bigProgressBarList: [// 大进度条下拉菜单列表
          {
            rewardId: 0,
            reward: {
              item: '',
              count: null
            }
          }
        ]
      }

改进后的代码示例：

 this.$set(this.bigProgressBarNum, this.bigProgressBarNum.length, {
        label: `第${this.bigProgressBarNum.length + 1}档`,
        visible: false,
        barValue: `第${this.bigProgressBarNum.length + 1}档`,
        bigProgressBarList: [// 大进度条下拉菜单列表
          {
            rewardId: 0,
            reward: {
              item: '',
              count: null
            }
          }
        ]
      })