缺陷1 :~ 对象新增的属性没有响应式

缺陷2 :~ 对数组的部分操作没有响应式

 data(){
 return{
   obj:{
   a:1
 }
 }}
methods:{
  fn1(){
     this.obj.a++   //有响应
  }
  fn2(){
    this.obj.b=2   //无响应
}

对象中: 解决对象新增属性无法响应式

   fn3(){
   //this.$set('对象','添加的属性',新值) 
     this.$set(this.obj,'c',3)  //有响应
    }
}

数组中: 解决数组无法响应式

使用有响应的数组方法: push(), pop(), shift() ,unshift() ,splice() ,sort() ,reverse() 来解决响应式的问题,

为什么这7个数组方法(api)有响应式:

      因为他们都能够修改原数组,在vue2 内部重新改写了这7个api

其他的操作都不会有响应式:

     1,通过下标给元素赋值 (无响应式)
     2,修改数组的length (无响应式)

或者 this.$set() 也可以解决数组的响应问题

let arr=[1,2,3,4]
fn3(){
    //老方法:
    //this.arr[0]=100  //无响应式
    //新方法  使用$set()
    //this.$set('数组','下标',值)  //有响应
      this.$set('this.arr','0',100) //arr=[100,2,3,4]
    }
}

总结:

对象:

 这样给对象obj 新增了一个属性b  并且赋值为2   此时在dom上是无法响应的

解决办法

   使用$set() 方法    $set(对象,属性名,属性值)
   $set() 是 vue只带的  官方提供的

数组:

 方法一:  push(), pop(), shift() ,unshift() ,splice() ,sort() ,reverse() 

 方法2: this.$set('数组','下标',值)  //有响应