Vue.set( target, propertyName/index, value )

  • 参数：

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value

  • 返回值：设置的值。

  • 用法：

    向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

    注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

作用1：

问题：如果直接在方法中通过数组下标来改变数组的值的话是不会响应到视图上的，比如下面这种情况

push(){ 
    this.arr[4]=5
    console.log(this.arr[4]) 
}

但是通过$set可以解决这个问题

push(){
   this.$set(this.arr,4,5)
   console.log(this.arr[4])
}

作用2:
如果直接为对象添加属性是不能响应式更新的，通过$set添加的属性可以实现响应式的更新

类似作用的还有
Vue.delete( target, propertyName/index )