使用this.$set无效，不更新视图

首先我们知道this.$set的用法，其实就是向响应式对象中添加一个属性，并且触发试图更新
举个例子：

listWarehouse(params)
      .then(({data})=>{
        let arr = []
        let arr2 = []
        let obj = {}

        data.rows.forEach((element) => {
          arr.push({
            label: element.warehouseName,
            value: element.warehouseId,
          });
        });
        console.log(arr,'arr')

        arr2 = arr.reduce((prev, item) => {
          obj[item.label] ? "" : (obj[item.label] = true && prev.push(item));
          return prev;
        }, []);
        // this.$delete(this.form, 'warehouseOpt')
        this.$set(this.form, 'warehouseOpt', arr2)
        console.log(this.form.warehouseOpt,'this.form.warehouseOpt')

      })

执行这段代码会发现视图上并没有更新warehouseOpt的值，但是控制台里可以打印出来。这就设计到ES5中的Object.defineProperty方法了，这个方法有一个缺点就是不能监听到对象或数组属性的增加或删除，就导致了这一现象的发生。

vue中的双向数据绑定就是用这个方法实现，vue在创建实例的时候，会遍历data里的值，为对象的每个属性加上getter和setter方法，一旦这些属性对应的值更新了就会去触发对应的视图更新，而age这个属性不是vue实例化的时候就拥有的属性，所以vue并没有对这个属性进行getter和setter的监听，因此无法实现双向绑定，也就无法更新视图。

但是this.$ set 方法还有另一种情况，就是当你要设置的key已经存在于这个对象或数组中的时候，它只会更改data并不会为该key添加响应检测，所以页面上的依赖warehouseOpt的试图就不会更新，解决这个问题的办法就是在设置值之前先把这个属性删除掉，然后再进行this.$set

this.$delete(this.form, 'warehouseOpt')
this.$set(this.form, 'warehouseOpt', arr2)