Vue 3学习理解 Object.assign浅拷贝

在Vue 3中，使用Object.assign进行对象的浅拷贝是一种常见的操作。这种操作可以用于创建一个对象的副本，从而不影响原始对象。

以下是一个简单的例子，展示如何在Vue 3中使用Object.assign进行对象的浅拷贝：

<template>
  <div>
    <p>原始对象: {{ originalObject }}</p>
    <p>浅拷贝后的对象: {{ copiedObject }}</p>
  </div>
</template>
 
<script>
import { reactive, toRefs } from 'vue';
 
export default {
  setup() {
    // 原始对象
    const originalObject = reactive({
      name: 'Vue',
      version: '3.x',
      features: ['Composition API', 'Fragment', 'Teleport']
    });
 
    // 使用Object.assign进行浅拷贝
    const copiedObject = toRefs(originalObject);
 
    // 返回响应式数据
    return {
      originalObject,
      copiedObject
    };
  }
};
</script>

在这个例子中，我们使用了Vue 3的reactiveAPI来创建一个响应式对象originalObject。然后我们使用Object.assign来创建originalObject的浅拷贝，并将其赋给copiedObject。

需要注意的是，Object.assign只进行一层深度的拷贝。这意味着如果原始对象中包含对象或数组等复杂类型的属性，浅拷贝后的对象和原始对象中这些属性的引用将是相同的。因此，浅拷贝可能不适合包含嵌套对象或数组的复杂结构。在这种情况下，可能需要使用其他方法，如JSON.parse(JSON.stringify(obj))或手动递归拷贝来处理深层次的复制需求。