vue 的 reactive 管理购物车需确保数组及项全程响应：增用 push/splice、删用 filter 或 splice（不直接赋值）、改用直接赋值（属性须初始存在）、查用 computed 实时派生。
Vue 的 reactive 是响应式状态管理的核心工具，用它管理购物车商品列表时，关键在于让整个商品数组及其每一项都保持可响应、可追踪。增删改查操作要直接作用于 reactive 对象，避免绕过响应式系统（比如用索引直接赋值或用 Object.assign 替换整个数组）。
添加商品：push 或 unshift 保持响应
向 reactive 数组中添加商品，必须使用数组的响应式方法（如 push、unshift），或用 splice。不能用下标赋值（如 cartItems[cartItems.length] = newItem），否则新增项不会触发更新。
- ✅ 正确：
cartItems.push({ id: 1, name: 'iPhone', price: 5999, count: 1 }) - ✅ 正确（批量）：
cartItems.push(...newItems) - ❌ 错误：
cartItems[cartItems.length] = newItem（不触发响应）
删除商品：用 filter 或 splice，避免直接 splice(index, 1) 后未重赋值
删除单个商品推荐用 filter 生成新数组并重新赋值给 reactive 变量；若用 splice，需确保在 reactive 代理对象上调用（它本身是响应式的）。注意：不能用 cartItems = cartItems.filter(...) 这种直接赋值，会丢失响应性——必须操作原 reactive 引用。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- ✅ 正确（推荐）：
cartItems.splice(cartItems.findIndex(item => item.id === id), 1) - ✅ 正确（函数式）：
Object.assign(cartItems, cartItems.filter(item => item.id !== id)) - ❌ 错误：
cartItems = cartItems.filter(...)（切断响应式连接）
修改数量或属性：直接赋值即可（前提是属性已存在）
对 reactive 数组中已有商品对象的属性修改（如 count、selected），只要该属性在初始化时就存在，就可以直接赋值，Vue 会自动追踪变化。如果动态添加新属性，需用 Vue.set（Vue 2）或 reactive 包裹后赋值（Vue 3 推荐用 proxy 机制，但需确保初始结构包含该字段）。
- ✅ 正确（已有 count 字段）：
item.count++或item.selected = !item.selected - ⚠️ 注意：若初始化时没定义
checked，应先声明：item.checked = false，再修改 - ✅ 更稳妥：用
ref或toRefs解构时保留响应性，或统一用reactive管理整个 item
查询与计算：配合 computed 提升性能和可读性
购物车总金额、选中商品数、是否全选等派生状态，不应手动维护，而应通过 computed 实时计算。这样既保证数据一致性，又避免冗余状态和同步 bug。
- ✅ 总价：
computed(() => cartItems.reduce((sum, item) => sum + item.price * item.count, 0)) - ✅ 选中项：
computed(() => cartItems.filter(item => item.selected)) - ✅ 全选状态：
computed(() => cartItems.length > 0 && cartItems.every(item => item.selected))
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
