Vue.set

Vue.set 是Vue中用于解决响应式问题的重要方法，主要作用是为响应式对象添加新属性时，确保Vue能追踪到属性变化。以下是它的参数及用法说明：
 
参数说明
 
1. target（必填）
- 要操作的目标对象（可以是Vue实例的数据对象，或数组）。
2. key（必填）
- 要添加的属性名，或数组中要修改的索引。
3. value（必填）
- 要添加的属性值，或数组中要设置的新值。
 
应用场景
 
1. 为对象添加新属性时
- 直接通过 obj.newProp = value 添加属性，Vue无法检测到变化，需用 Vue.set(obj, 'newProp', value) 。
2. 修改数组指定索引元素时
- 直接通过 arr[index] = newVal 修改数组，Vue无法响应，需用 Vue.set(arr, index, newVal) 。
 
示例：
// 对象场景
const vm = new Vue({
  data: {
    user: { name: '张三' }
  }
})
// 错误方式（无响应）
vm.user.age = 25
// 正确方式（触发视图更新）
Vue.set(vm.user, 'age', 25)

// 数组场景
const arr = [1, 2, 3]
// 错误方式（无响应）
arr[0] = 100
// 正确方式
Vue.set(arr, 0, 100)
 
 
等价写法
 
- 在Vue实例中，可使用 this.$set(target, key, value) 替代 Vue.set ，作用相同。
 
注意
 
- 若目标是数组， key 需传入索引， value 为新元素值。
- 该方法会触发视图更新，是解决Vue响应式问题的核心工具之一。