vue $set怎么实现给数组集合对象赋值

# Vue $set 怎么实现给数组集合对象赋值 ## 一、Vue 响应式原理与 $set 的诞生背景 ### 1.1 Vue 的响应式系统局限性 Vue 2.x 使用 `Object.defineProperty` 实现响应式，这种实现存在两个主要限制： 1. **无法检测对象属性的添加/删除** 2. **数组变更的特殊情况**： - 通过索引直接设置项（`arr[index] = newValue`） - 修改数组长度（`arr.length = newLength`） ### 1.2 为什么需要 $set 当我们需要动态给响应式对象添加新属性，或修改数组特定索引的值时，直接赋值不会触发视图更新。这时就需要使用 `Vue.set` 或实例方法 `this.$set`。 ```javascript // 不会触发更新 this.arr[1] = 'new value' this.obj.newProp = 'value' // 正确做法 this.$set(this.arr, 1, 'new value') this.$set(this.obj, 'newProp', 'value') 

二、$set 的核心实现解析

2.1 源码位置（Vue 2.x）

$set 方法定义在 src/core/observer/index.js 中：

export function set(target, key, val) { // 处理数组情况 if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val } // 处理对象已有属性 if (key in target && !(key in Object.prototype)) { target[key] = val return val } // 处理新增对象属性 const ob = target.__ob__ if (!ob) { target[key] = val return val } defineReactive(ob.value, key, val) ob.dep.notify() return val } 

2.2 数组处理的特殊逻辑

对于数组操作，$set 内部实际上使用了 splice 方法，这是因为 Vue 重写了数组的变异方法（push/pop/shift/unshift/splice/sort/reverse），使得这些方法能够触发响应式更新。

// 等效操作 this.$set(arr, index, value) // 等同于 arr.splice(index, 1, value) 

三、$set 的实际应用场景

3.1 动态添加对象属性

export default { data() { return { user: { name: '张三' } } }, methods: { addAge() { // 错误方式 // this.user.age = 25 // 不会响应 // 正确方式 this.$set(this.user, 'age', 25) } } } 

3.2 修改数组元素

export default { data() { return { items: ['a', 'b', 'c'] } }, methods: { updateItem(index) { // 错误方式 // this.items[index] = 'x' // 不会响应 // 正确方式 this.$set(this.items, index, 'x') // 替代方案（同样有效） // this.items.splice(index, 1, 'x') } } } 

3.3 动态添加嵌套属性

export default { data() { return { formData: {} } }, methods: { initForm() { // 多层嵌套需要逐层设置 this.$set(this.formData, 'contact', {}) this.$set(this.formData.contact, 'phone', '') } } } 

四、$set 的替代方案比较

4.1 使用 Vue 3 的 reactive

在 Vue 3 中，基于 Proxy 的响应式系统不再需要 $set：

import { reactive } from 'vue' const state = reactive({}) state.newProp = 'value' // 自动响应 

4.2 使用 Object.assign

对于对象，可以创建新对象触发更新：

this.user = Object.assign({}, this.user, { age: 25 }) 

4.3 数组的特殊方法

对于数组，优先使用变异方法：

// 替换元素 this.items.splice(index, 1, newItem) // 添加元素 this.items.push(newItem) 

五、$set 的注意事项

1. 不能用于根级响应式属性：

   // 错误！不能直接添加根级属性 this.$set(this, 'newProp', value) 

2. 性能考虑：

   • 频繁使用 $set 可能影响性能
   • 对于批量操作，建议先处理数据再整体赋值

3. 与 v-model 的配合： “`html

 ## 六、总结 `$set` 是 Vue 2.x 响应式系统的重要补充，它解决了以下关键问题： - 动态添加响应式属性 - 数组索引直接赋值 - 确保嵌套属性的响应性 在 Vue 3 中，由于 Proxy 的实现，大多数情况下不再需要 `$set`，但在 Vue 2.x 项目中，它仍然是处理动态响应式数据的利器。 **最佳实践建议**： 1. 初始化时尽量声明所有响应式属性 2. 必须动态添加时优先使用 `$set` 3. 数组操作优先使用变异方法 4. 复杂数据结构考虑使用 Vuex 或 Pinia 管理状态 通过合理运用 `$set` 方法，可以确保你的 Vue 应用始终保持正确的响应式行为。