Vue 3中数组与对象
一、Vue 3响应式原理与基础操作
1. 响应式系统实现
Vue 3使用Proxy替代了Vue 2中的Object.defineProperty来实现响应式系统，带来了以下优势：
全面性：可以监听对象的新增属性和删除属性
高效性：无需递归遍历整个对象树，只有在访问某个属性时才会触发代理
支持数组操作：可以直接监听数组的变化，例如push、splice等方法
核心API包括：
reactive：用于创建响应式对象，适用于复杂数据结构
ref：用于创建包含value属性的响应式对象，适用于基本数据类型
toRefs：将响应式对象转换为普通对象的响应式引用
2. 数组操作最佳实践
Vue 3对数组的原生变异方法进行了包裹，使得这些操作能够触发视图更新：
const arr = reactive([1, 2, 3]);arr.push(4); // 正确方式
应避免的操作：
直接通过索引修改数组元素：arr[0] = 'newValue' (不会触发更新)
直接修改数组长度：arr.length = newLength (不会触发更新)
二、对象操作与动态属性管理
1. 对象属性操作
在Vue 3中，可以直接修改响应式对象的属性：
const form = reactive({ file: "", fileArr: [] });form.file = "newFile.txt"; // 正确方式
批量更新对象属性的方法：
// 使用Object.assignObject.assign(form, { file: "newFile.txt", fileArr: ["file1.txt"] });// 使用展开运算符form = { ...form, ...{ file: "newFile.txt" } }:ml-citation{ref="13" data="citationList"}2. 动态添加属性
Vue 3中动态添加属性的正确方式：
const maskingConfig = reactive({} as any);maskingConfig.newProperty = "value"; // 直接添加属性:ml-citation{ref="27" data="citationList"}// 或者使用Reflect.setReflect.set(val, 'middle', middle):ml-citation{ref="26" data="citationList"}三、深拷贝与响应式数据
1. 深拷贝方法
在Vue 3中实现深拷贝的几种方式：
2. 保持响应式的深拷贝
如果需要保持响应式特性，可以使用toRefs：
const original = reactive({ count: 0 });const copy = toRefs(original); // 保持响应式:ml-citation{ref="20" data="citationList"}四、性能优化技巧
1. 数组性能优化
对于大型数组，考虑使用
shallowRef或markRaw来避免不必要的响应式转换避免在计算属性中修改状态或产生副作用
使用
v-for时始终提供唯一的key值
2. 对象性能优化
仅将需要响应式更新的数据标记为响应式
使用
computed属性基于其依赖的响应式数据进行缓存优化深度监听，只监听必要的属性变化
五、常见问题与解决方案
1. 响应式失效场景
直接整体替换reactive对象：
obj = {a:2}(失去响应式)解决：使用
Object.assign(obj, {a:2})数组直接赋新数组引用：
arr = [4,5,6](失效)解决：
arr.splice(0, arr.length,4,5,6)深层嵌套对象修改不触发更新
解决：确保使用
reactive创建嵌套对象，或改用watchEffect自动追踪依赖
2. 嵌套对象响应式问题
Vue 3的Proxy在处理深层嵌套对象时可能存在缺陷：
const proxyVal = reactive({ info: { age: 18, deep: { desc: '...' } } });// 直接访问proxyVal.info.age可能不会触发深层代理:ml-citation{ref="47" data="citationList"}解决方案：
直接访问reactive定义的变量，而不是使用解构赋值
使用toRefs方法将响应式对象转化为普通对象的响应式属性
在解构赋值时使用拷贝来避免数据丢失
