diff --git a/src/dialog/dialog.en-US.md b/src/dialog/dialog.en-US.md
index 8ed173909..577a2d413 100644
--- a/src/dialog/dialog.en-US.md
+++ b/src/dialog/dialog.en-US.md
@@ -61,6 +61,7 @@ dialogStyle | Object | - | Styles that apply to the dialog box itself. Typescrip
 draggable | Boolean | false | \- | N
 footer | Boolean / Slot / Function | true | Typescript: `boolean \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 header | String / Boolean / Slot / Function | true | Typescript: `string \| boolean \| TNode`. [see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+lazy | Boolean | false | Enable Dialog lazy loading, the contents of the dialog box are not rendered when enable | N
 mode | String | modal | options: modal/modeless/normal/full-screen | N
 placement | String | top | options: top/center | N
 preventScrollThrough | Boolean | true | \- | N
diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md
index 2758b062d..9f9cb7b26 100644
--- a/src/dialog/dialog.md
+++ b/src/dialog/dialog.md
@@ -55,6 +55,7 @@ dialogStyle | Object | - | 作用于对话框本身的样式。TS 类型：`Styl
 draggable | Boolean | false | 对话框是否可以拖拽（仅在非模态对话框时有效） | N
 footer | Boolean / Slot / Function | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+lazy | Boolean | false | 是否启用对话框懒加载，启用时对话框内的内容不渲染 | N
 mode | String | modal | 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件。可选项：modal/modeless/normal/full-screen | N
 placement | String | top | 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小。可选项：top/center | N
 preventScrollThrough | Boolean | true | 防止滚动穿透 | N
diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
index dc4b71d7c..4ca652401 100644
--- a/src/dialog/dialog.tsx
+++ b/src/dialog/dialog.tsx
@@ -73,6 +73,7 @@ export default mixins(
       styleEl: null,
       timer: null,
       animationEnd: false,
+      isMounted: false,
     };
   },
 
@@ -155,14 +156,20 @@ export default mixins(
     computedAttach(): AttachNode {
       return this.showInAttachedElement || this.isNormal ? undefined : this.attach || this.globalAttach();
     },
+    shouldRender(): boolean {
+      const shouldDestroy = this.destroyOnClose && !this.visible && this.animationEnd;
+      const avoidRender = !this.lazy || this.isMounted;
+      return shouldDestroy || avoidRender;
+    },
   },
-
   watch: {
     visible: {
       handler(value) {
         if (typeof window === 'undefined') return;
         if (value) {
           this.animationEnd = false;
+          this.isMounted = true;
+
           if ((this.isModal && !this.showInAttachedElement) || this.isFullScreen) {
             if (this.preventScrollThrough) {
               this.$nextTick(() => {
@@ -411,7 +418,7 @@ export default mixins(
     },
     initDragEvent(status: boolean) {
       const target = this.$refs.dialog as HTMLElement;
-      if (status) {
+      if (status && target) {
         target.addEventListener('mousedown', this.mousedownHandler);
       } else {
         target.removeEventListener('mousedown', this.mousedownHandler);
@@ -518,7 +525,7 @@ export default mixins(
     const view = [maskView, dialogView];
     const ctxStyle = { zIndex: this.zIndex };
 
-    if (this.destroyOnClose && !this.visible && this.animationEnd) return null;
+    if (!this.shouldRender) return null;
 
     return (
       <transition
diff --git a/src/dialog/props.ts b/src/dialog/props.ts
index ecb309e62..73758ea35 100644
--- a/src/dialog/props.ts
+++ b/src/dialog/props.ts
@@ -73,6 +73,8 @@ export default {
     type: [String, Boolean, Function] as PropType<TdDialogProps['header']>,
     default: true,
   },
+  /** 是否启用对话框懒加载，启用时对话框内的内容不渲染 */
+  lazy: Boolean,
   /** 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件 */
   mode: {
     type: String as PropType<TdDialogProps['mode']>,
diff --git a/src/dialog/type.ts b/src/dialog/type.ts
index a74f1d6a4..57b1b45d1 100644
--- a/src/dialog/type.ts
+++ b/src/dialog/type.ts
@@ -79,6 +79,11 @@ export interface TdDialogProps {
    * @default true
    */
   header?: string | boolean | TNode;
+  /**
+   * 是否启用对话框懒加载，启用时对话框内的内容不渲染
+   * @default false
+   */
+  lazy?: boolean;
   /**
    * 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件
    * @default modal