this.$set的用法，解决视图不更新

有时候对数组或对象操作的时候值改变了视图却没有更新页面没有进行渲染，效果如下

    D9Arr=[
    {name:"",age:""},
    {name:"",age:""},
    {name:"",age:""},
    ]

  computed: {
    typeD9Data() {
      return this.$store.state.webSocketData.typeD9DataA;
    },
  },
    watch：{
          typeD9Data:{
           handler: function (val) {
             switch (val) {
              case 1:
                this.D9Arr[0] = val
                break;
              case 2:
                this.D9Arr[1] = val
                break;
              case 3:
                this.D9Arr[2] = val
                break;
              default:
                break;
             }
           }
        },
    }
   

监听typeD9Data的变化改变D9Arr的值，值改变了视图却没有更新。

使用this.$set 就可以完美的解决这个问题

用法：

调用：this.$set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

使用过this.$set过后的代码

  watch：{
          typeD9Data:{
           handler: function (val) {
             switch (val) {
              case 1:
                this.$set(this.D9Arr,0,val)
                break;
              case 2:
                this.$set(this.D9Arr,1,val)
                break;
              case 3:
                this.$set(this.D9Arr,2,val)
                break;
              default:
                break;
             }
           }
        },
    }

总结：对数组或者对象进行各种骚操的时候（赋值、新增属性、修改属性），视图不更新没有渲染就调用this.$set()。