谈一下Vue-typeScript数据类型的浅拷贝和深拷贝

'# 谈一下Vue-TypeScript数据类型的浅拷贝和深拷贝

一、背景与问题

在Vue 3中，响应式系统的实现基于Proxy对象，当直接修改对象属性时，会触发依赖更新。但在实际开发中，频繁的赋值操作可能导致数据引用混乱。例如：

interface User {
  id: number
  info: {
    name: string
    age: number
  }
}

const original = {
  id: 1,
  info: { name: 'Alice', age: 25 }
}

// 问题：直接修改会导致原对象被修改
const shallowCopy = original
shallowCopy.info.name = 'Bob'
console.log(original.info.name) // 输出 'Bob'

上述代码中，shallowCopy和original指向同一对象，修改shallowCopy的属性会直接改变original的值。这可能导致意想不到的副作用。

在Vue中，这种引用关系会破坏响应式系统的稳定性。因此，我们需要通过浅拷贝和深拷贝来创建独立的副本，确保数据隔离和响应式系统的稳定性。

二、基本原理

1. 浅拷贝原理

浅拷贝只复制对象的顶层属性，子对象仍然引用原始对象的内存地址。常见实现方式包括：

• Object.assign()
• 展开运算符 ...
• Array.from()（针对数组）

原理：创建新对象，逐个复制原对象的可枚举属性，但不会递归复制嵌套对象。

2. 深拷贝原理

深拷贝会递归复制所有层级的属性，确保完全独立。常见实现方式包括：

• JSON.parse(JSON.stringify())（局限性）
• 手动递归复制
• 使用第三方库（如lodash.cloneDeep()）

原理：通过递归遍历对象的所有层级，创建新的内存地址，确保完全独立。

三、环境准备

确保开发环境支持Vue 3和TypeScript：

npm install -g @vue/cli
vue create vue-ts-demo
cd vue-ts-demo
npm install --save-dev @types/lodash

在main.ts中引入TypeScript支持：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

四、核心实现

1. 浅拷贝实现（Object.assign）

const original = {
  id: 1,
  info: { name: 'Alice', age: 25 }
}

// 浅拷贝
const shallowCopy = Object.assign({}, original)
shallowCopy.info.name = 'Bob'

console.log(original.info.name) // 输出 'Bob'（浅拷贝失败）

关键点：Object.assign()只复制顶层属性，info对象仍指向原对象的内存地址。

2. 深拷贝实现（JSON方法）

const original = {
  id: 1,
  info: { name: 'Alice', age: 25 }
}

// 深拷贝（不推荐）
const deepCopy = JSON.parse(JSON.stringify(original))
deepCopy.info.name = 'Bob'

console.log(original.info.name) // 输出 'Alice'（深拷贝成功）

性能问题：JSON.stringify()会丢失函数、undefined、Symbol等类型，并且无法处理循环引用。

3. 手动深拷贝（递归实现）

function deepCopy(obj: any): any {
  if (obj === null || typeof obj !== 'object') return obj
  const newObj = Array.isArray(obj) ? [] : {}
  
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key])
    }
  }
  
  return newObj
}

// 使用示例
const original = {
  id: 1,
  info: { name: 'Alice', age: 25 }
}

const deepCopy = deepCopy(original)
deepCopy.info.name = 'Bob'

console.log(original.info.name) // 输出 'Alice'（深拷贝成功）

关键点：递归复制所有层级，确保完全独立。但处理复杂对象时需注意性能。

五、完整案例

场景：表单数据处理

在Vue组件中，使用深拷贝处理表单数据，避免直接修改原数据：

<template>
  <div>
    <input v-model="formData.name" placeholder="输入姓名" />
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const formData = ref({
      name: '',
      age: 0,
      info: { address: '', phone: '' }
    })

    const handleSubmit = () => {
      // 创建深拷贝
      const copiedData = deepCopy(formData.value)
      console.log('提交数据:', copiedData)
      // 重置表单
      formData.value = deepCopy(formData.value)
    }

    return { formData, handleSubmit }
  }
}
</script>

关键点：通过深拷贝确保提交的数据与表单状态分离，避免副作用。

六、源码解析

1. JSON.parse(JSON.stringify()) 的局限性

const original = {
  id: 1,
  info: { name: 'Alice', age: 25 },
  func: () => console.log('Hello')
}

const deepCopy = JSON.parse(JSON.stringify(original))
console.log(deepCopy) // { id: 1, info: { name: 'Alice', age: 25 } }

问题：函数、undefined、Symbol等类型被丢失，且无法处理循环引用。

2. 手动递归深拷贝的优化

function deepCopy(obj: any): any {
  if (obj === null || typeof obj !== 'object') return obj
  const newObj = Array.isArray(obj) ? [] : {}
  
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 优化：处理循环引用
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        newObj[key] = deepCopy(obj[key])
      } else {
        newObj[key] = obj[key]
      }
    }
  }
  
  return newObj
}

关键点：通过类型判断和递归处理，避免无限递归。

七、进阶使用

1. 使用第三方库（lodash）

npm install --save lodash

import { cloneDeep } from 'lodash'

const original = {
  id: 1,
  info: { name: 'Alice', age: 25 }
}

const deepCopy = cloneDeep(original)
deepCopy.info.name = 'Bob'
console.log(original.info.name) // 输出 'Alice'

优势：处理复杂对象、循环引用、函数等，但会引入额外依赖。

2. 响应式系统的兼容性

在Vue 3中，reactive()函数会创建响应式对象，直接赋值会触发更新。但深拷贝后的新对象不会触发更新：

const original = reactive({
  id: 1,
  info: { name: 'Alice', age: 25 }
})

const shallowCopy = original
shallowCopy.info.name = 'Bob' // 触发更新

const deepCopy = JSON.parse(JSON.stringify(original))
deepCopy.info.name = 'Bob' // 不会触发更新

关键点：深拷贝后的对象脱离响应式系统，需手动触发更新。

八、性能与工程实践

1. 性能优化策略

• 避免不必要的深拷贝：在组件更新时，仅拷贝需要修改的部分。
• 使用符号标记：为对象添加唯一标识符，避免循环引用。
• 增量更新：仅更新需要修改的字段，而非整个对象。

2. 异常处理

function safeDeepCopy(obj: any): any {
  try {
    return JSON.parse(JSON.stringify(obj))
  } catch (e) {
    console.error('深拷贝失败:', e)
    return obj
  }
}

3. 安全风险

使用JSON.parse(JSON.stringify())时，需警惕反序列化漏洞：

const maliciousData = '{"__proto__": {"toString": "alert(1)"}'
const safeData = JSON.parse(maliciousData) // 可能触发安全漏洞

解决方案：使用第三方库进行安全解析。

九、常见问题与踩坑

1. 浅拷贝导致的引用混乱

const original = { name: 'Alice' }
const shallowCopy = original
shallowCopy.name = 'Bob'
console.log(original.name) // 输出 'Bob'

解决方案：使用Object.assign()或展开运算符创建新对象。

2. 循环引用导致的栈溢出

const a = {}
const b = {}
a.b = b
b.a = a

const deepCopy = JSON.parse(JSON.stringify(a)) // 报错：JSON.stringify: Invalid character

解决方案：手动处理循环引用，或使用第三方库。

3. 类型丢失

const original: { name: string; age: number } = { name: 'Alice', age: 25 }
const deepCopy = JSON.parse(JSON.stringify(original)) // 类型丢失

解决方案：使用类型断言或第三方库保持类型信息。

十、最佳实践

1. 使用场景推荐

2. 避免使用场景

十一、总结

Vue 3 中的浅拷贝和深拷贝是处理数据隔离的核心技术。浅拷贝适用于简单场景，而深拷贝在复杂对象处理中必不可少。通过理解其原理和实现方式，我们可以避免引用混乱、响应式系统失效等问题。在实际开发中，应根据场景选择合适的方法，并注意性能优化和安全风险。掌握这些技术，能够显著提升代码的稳定性和可维护性。