一、为什么需要使用Vue.set？
vue中不能检测到数组和对象的两种变化：
1、数组长度的变化 vm.arr.length = 4
2、数组通过索引值修改内容 vm.arr[1] = ‘aa’
Vue.$set(target,key,value)：可以动态的给数组、对象添加和修改数据，并更新视图中数据的显示。
vue在构造函数new Vue()时，就通过Object.defineProperty中的getter和setter 这两个方法，完成了对数据的绑定。所以直接通过vm.arr[1] = ‘aa’的方法，无法修改值去触发vue中视图的更新，必须还得通过Object.defineProperty的方法去改变，而Vue.$set（）就封装了js底层的Object.defineProperty方法。
所以我们需要利用Vue.set() 响应式新增与修改数据。
二、Vue.set使用
Vue不能检测到对象属性的添加或删除。
由于Vue会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能让Vue转换它，这样才能是响应式的。例如：
data () {
return {
form: {
total: 10
}
}
}
// this.form.total是响应式的
// 若直接增加属性，是非响应式的
this.form.showFlag= true //非响应式的
使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上。Vue.set(this.form, ‘showFlag‘, true)
还可以使用vm.$set实例方法，这也是全局Vue.set方法的别名：this.$set(this.form, ‘showFlag‘, true)
这样，this.form.showFlag 就是响应式的了。
Vue.set(target, key/index, value) 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.obj.newProperty = ‘hi‘)
官方文档：https://cn.vuejs.org/v2/api/#Vue-set
Vue.set( target, propertyName/index, value )
- 参数：
{Object | Array} target{string | number} propertyName/index{any} value
- 返回值：设置的值。
- 用法：
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如
this.myObject.newProperty = ‘hi‘)注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。意思是，set 这个方法只能用于data 里面的子数组对象，而不能直接用于data (这个根数据)或者vue 实例
var vm = new Vue({
el:"#div",
data: {
items: [‘a‘, ‘b‘, ‘c‘]
}
});
Vue.set(vm.items,2,"ling")
设置数组元素：Vue.set(vm.items, 2, "ling") 表示把 vm.items 这个数组的下标为2 的元素，改为"ling"，把数组 ["a","b","c"] 修改后是 ["a","b","ling"]
原文地址：https://www.cnblogs.com/goloving/p/10986120.html