# 副本与深拷贝 | Creght 可视化文档

> 本教程将帮助你快速理解 副本（Duplicate） 和 深拷贝（Deep Copy） 的区别，以及在什么场景下该使用哪一个。 如果你刚开始使用组件功能， 强烈建议从本页开始阅读 。 一、什么是副本（Duplicate）？…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

设计/

# 副本与深拷贝

本教程将帮助你快速理解 **副本（Duplicate）** 和 **深拷贝（Deep Copy）** 的区别，以及在什么场景下该使用哪一个。

如果你刚开始使用组件功能， **强烈建议从本页开始阅读**。

* * *

## 一、什么是副本（Duplicate）？

**副本（Duplicate）**，就是把当前组件「复制一份」出来。

> ⚠️ 注意：不同类型的组件，副本的表现是不同的。

* * *

### 1️⃣ 普通组件：复制后彼此独立

对于 **普通组件**，副本是一个 **完全独立的新组件**。

- 修改副本，不会影响原组件
- 原组件和副本之间互不关联

**示例：文本组件**

1. 页面中有一段文本 A： `Hello world`
2. 将文本 A 复制一份，得到文本 B
3. 把文本 B 修改为： `你好世界`

结果是：

- 文本 A 仍然是 `Hello world`
- 文本 B 显示为 `你好世界`

两者互不影响。

![image.png](https://fsu.creght.com/user/3/mmgImVKbgDW__image.png)

* * *

### 2️⃣ 自定义组件：复制的是「实例」

对于 **自定义组件**，副本并不会创建新的组件母本，而只是多创建了一个 **实例**。

这意味着：

- 所有副本实例，都指向 **同一个组件母本**
- 只要母本被修改，所有实例都会一起变化

**示例：按钮组件**

1. 页面中已有按钮实例 A
2. 复制按钮 A，得到按钮实例 B
3. 此时 A 和 B 使用的是 **同一个按钮母本**

![image.png](https://fsu.creght.com/user/3/mmgImXrWEHT__image.png)

接下来，我们进入按钮组件详情（母本），将背景色修改为红色。

![image.png](https://fsu.creght.com/user/3/mmgImYVLZUu__image.png)

你会看到：

- 按钮 A 变成红色
- 按钮 B 也同时变成红色

👉 这是正常现象，因为它们共享同一个母本。

![image.png](https://fsu.creght.com/user/3/mmgInayAPcJ__image.png)

* * *

## 二、什么是深拷贝（Deep **Copy**）？

当你希望：

- 基于一个已有的自定义组件进行修改
- 但 **不想影响原来的组件和实例**

这时，就需要使用 **深拷贝（Deep Copy）**。

* * *

### 深拷贝怎么用？

1. 选中一个 **自定义组件实例**
2. 鼠标右键
3. 点击 **深拷贝（Deep Copy）**


> ℹ️ 提示：只有选中「自定义组件实例」时，才会看到该选项。


![image.png](https://fsu.creght.com/user/3/mmgIncBqETB__image.png)

* * *

### 深拷贝做了什么？

深拷贝会自动完成两件事：

1. 复制原组件的 **母本**，生成一个新的母本 B
2. 当前组件会切换为「母本 B 的实例」

最终效果是：

- 原组件实例，继续使用原母本
- 深拷贝出来的组件，拥有 **自己的独立母本**

之后无论你如何修改，都 **不会相互影响**。

* * *

### 深拷贝示例（按钮）

1. 对按钮实例 A 执行 **深拷贝**
2. 得到按钮实例 B（使用母本 B）
3. 进入按钮 B 的组件详情（母本 B）
4. 将按钮背景色修改为绿色，如下图所示

![image.png](https://fsu.creght.com/user/3/mmgInegchhz__image.png)

此时页面效果为：

- 按钮 A：保持原样（未变化）
- 按钮 B：背景色变为绿色

![image.png](https://fsu.creght.com/user/3/mmgInfOyCuP__image.png)

说明两个按钮已经完全独立。

* * *

## 三、新手该怎么选？

可以按照下面的规则快速判断：

### ✅ 使用「副本（Duplicate）」当你：

- 复制的是普通组件（文本、图片等）
- 希望多个按钮 / 卡片样式 **始终保持一致**

### ✅ 使用「深拷贝（Deep **Copy**）」当你：

- 想在现有组件基础上做「改版」或「二次设计」
- 希望新组件以后不再受原组件影响

* * *

## 小结

- **副本（Duplicate）**：
  - 普通组件 → 完全独立
  - 自定义组件 → 共享同一个母本
- **深拷贝（Deep Copy）**：
  - 创建一个全新的组件母本
  - 用于组件分支和个性化定制

掌握这两个概念，可以帮你避免「一改全改」的问题，也能更高效地复用组件。

本文目录

- [一、什么是副本（Duplicate）？](#一-什么是副本-duplicate)
- [1️⃣ 普通组件：复制后彼此独立](#1-普通组件-复制后彼此独立)
- [2️⃣ 自定义组件：复制的是「实例」](#2-自定义组件-复制的是-实例)
- [二、什么是深拷贝（Deep Copy ）？](#二-什么是深拷贝-deep-copy)
- [深拷贝怎么用？](#深拷贝怎么用)
- [深拷贝做了什么？](#深拷贝做了什么)
- [深拷贝示例（按钮）](#深拷贝示例-按钮)
- [三、新手该怎么选？](#三-新手该怎么选)
- [✅ 使用「副本（Duplicate）」当你：](#使用-副本-duplicate-当你)
- [✅ 使用「深拷贝（Deep Copy ）」当你：](#使用-深拷贝-deep-copy-当你)
- [小结](#小结)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)