vue 对象、数组增删改，对比vue2和vue3 —— 最新总结2025

一、对象操作对比

1. Vue 2 的对象操作

• 新增属性 ：无法直接通过 obj.newKey = 'value' 添加响应式属性，需使用 Vue.set 或 this.$set。

this.$set(this.obj, 'newKey', 'value'); // 触发响应式更新

• 删除属性 ：无法直接通过 delete obj.key 删除响应式属性，需使用 Vue.delete 或 this.$delete。

this.$delete(this.obj, 'key'); // 触发响应式更新

• 修改属性：直接修改属性值可触发响应式更新。

this.obj.key = 'newValue'; // 触发响应式更新

2. Vue 3 的对象操作

新增属性 ：直接通过 obj.newKey = 'value' 添加属性即可触发响应式更新，无需手动调用 $set。

const obj = reactive({ key: 'value' });
obj.newKey = 'newValue'; // 自动触发响应式更新

• 删除属性 ：直接通过 delete obj.key 删除属性即可触发响应式更新，无需手动调用 $delete。

delete obj.key; // 自动触发响应式更新

• 修改属性：直接修改属性值可触发响应式更新。

obj.key = 'newValue'; // 自动触发响应式更新

二、数组操作对比

1. Vue 2 的数组操作

新增元素 ：需使用数组变异方法（如 push、unshift、splice）或通过 $set 修改索引。

this.items.push(newItem); // 触发响应式更新
this.$set(this.items, this.items.length, newItem); // 触发响应式更新

---

---

一、对象（Object）操作

1. 添加/修改属性

// ❌ 错误 - 不会触发响应式更新
this.obj.newKey = 'value'

// ✅ 正确 - Vue 2
this.$set(this.obj, 'newKey', 'value')

// ✅ 正确 - Vue 3
import { reactive } from 'vue'
const obj = reactive({})
obj.newKey = 'value'  // Vue 3 中可以直接添加

// ✅ 正确 - 重新赋值（两种版本都适用）
this.obj = {
  ...this.obj,
  newKey: 'value'
}

2. 删除属性

// ❌ 错误
delete this.obj.property

// ✅ 正确 - Vue 2
this.$delete(this.obj, 'property')

// ✅ 正确 - Vue 3
delete this.obj.property  // Vue 3 中可以直接删除

// ✅ 正确 - 重新赋值
const { property, ...rest } = this.obj
this.obj = rest

3. 嵌套对象操作

// ✅ 正确 - 深度修改
this.$set(this.user, 'profile', { name: 'John' })

// ✅ 嵌套属性修改
this.$set(this.user.profile, 'age', 25)

// ✅ 使用 Vue 3 Composition API
import { reactive } from 'vue'
const state = reactive({
  user: {
    profile: {}
  }
})
state.user.profile.name = 'John'  // 自动响应

二、数组（Array）操作

1. 变异方法（可触发响应式更新）

// ✅ push - 末尾添加
this.items.push(newItem)
this.items.push(item1, item2, item3)  // 添加多个

// ✅ pop - 末尾删除
this.items.pop()

// ✅ shift - 开头删除
this.items.shift()

// ✅ unshift - 开头添加
this.items.unshift(newItem)

// ✅ splice - 增删改
// 删除：从索引2开始删除1个元素
this.items.splice(2, 1)

// 替换：从索引2开始删除1个元素，添加新元素
this.items.splice(2, 1, newItem)

// 添加：从索引2开始删除0个元素，添加新元素
this.items.splice(2, 0, newItem)

// ✅ sort - 排序
this.items.sort((a, b) => a - b)

// ✅ reverse - 反转
this.items.reverse()

2. 非变异方法（需要重新赋值）

// ❌ 错误 - 不会触发更新
this.items[0] = 'newValue'

// ✅ 正确 - 使用 Vue.set
this.$set(this.items, 0, 'newValue')

// ✅ 正确 - 使用 splice
this.items.splice(0, 1, 'newValue')

// ✅ 正确 - 修改长度
this.items.splice(newLength)  // 截断数组

3. 数组替换操作

// 过滤数组
this.items = this.items.filter(item => item.id !== id)

// 映射数组
this.items = this.items.map(item => 
  item.id === id ? { ...item, value: 'updated' } : item
)

// 添加元素（非变异方式）
this.items = [...this.items, newItem]

// 合并数组
this.items = [...this.items, ...newItems]