vm.$set()、vm.$delete()

vm.$set

功能：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于响应式对象上添加新属性，因为vue无法探测普通的新增属性（如 this.myObject.newProperty=‘hi’）注意：对象不能是vue实例，或者vue实例的跟数据对象

vm.$delete

功能: 删除对象的属性，如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开vue不能检测到属性被删除的限制，
注意：目标对象不能是一个vue实例或vue实例的根数据对象。

一，实现的效果

在这里插入图片描述

二，原本的实现方式：

 //增加时间
      addTime(){
    
    
          if(this.ruleForm.startTime && this.ruleForm.endTime){
    
    
              var obj={
    
    }
              obj.startTime=this.ruleForm.startTime
              obj.endTime=this.ruleForm.endTime
              this.ruleForm.timeList.unshift(obj)
          }else{
    
    
              this.$message('请选择时间')
          }
      },
      //删除时间
      delTime(index){
    
    
          this.ruleForm.timeList.splice(index,1)
      },

三，现在的实现方式（另一个相同的功能代码）

// 添加套餐分组
    addGroup() {
    
    
      let obj = {
    
    
            title:'',
            num:'',
            tableData:[
              {
    
    
                title:'西红柿炒鸡蛋',
                price:'￥20.00',
                num:'0',
                total:'100'
              }
            ]
          };
      let arr = this.ruleForm.groups;
      this.$set(arr, arr.length, obj);
    },
    // 删除套餐分组
    delGroup(index) {
    
    
      if (index == 0) {
    
    
        return;
      }
      this.$delete(this.ruleForm.groups, index);
    },

也就是说this. $s e t 具备三个参数，第一个是指明数据在 d a t a 中的位置，第二个是新增数据的索引，第三个是新增的数据项。另外， t h i s .$ delete具备两个参数，第一个是指明数据在data中的位置，第二个是删除数据的索引。