🎃Vue2.0 $set()的正确使用方式,响应式

问题: vue2.0 中不能监视数据变化的两种情况:

1. 第一种情况: 直接通过索引修改数组的值

如下代码: 修改arr数组里面的值

data () {
 return {
    arr:[1,3,55,23,67] 
  }
}
methods: {
  this.arr[0] = 100  // 这种情况是不会触发视图更新的,视图无法监听到 ****
}

注意: 如果我直接通过索引修改arr的值 this.arr[0]=100,这种情况是不会触发

视图更新的

解决方法:

this.$set(this.arr, '0' , 100)  // 这样就会有响应式的效果

2. 第二种情况: 对象不能监听新增的属性

如下代码: 修改给对象添加属性

data () {
  return {
    obj:{
      a:1
    }
  }
}
methods: {
  this.obj.a = 3 // 这种情况是可以的,因为a在obj已经存在,相当于修改a的值
  // ******
  this.obj.b = 5 // 这种情况就不行,因为b在obj里面不存在,相当于直接给obj新加属性,vue2.0监听不到,视图也不会更新改变,
}

注意: 如果我直接给对象新增属性(赋值操作),这种情况是不会触发视图更新的

解决方法:

解决方法1:

this.$set(this.obj, 'b', 5) // 这样就会有响应式的效果

解决方法2:
先给对象加属性,然后再让他们整体有响应式

总结: 用this.$set(对象,属性名,新值) 就会有响应式的效果