From e610e8a8612e9ccfb0aba5051dbd094dd60525fb Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 5 Mar 2022 14:51:16 +0800
Subject: [PATCH] style: update pageheader

---
 components/_util/hooks/useDestroyed.ts     | 12 ++++++++++++
 components/page-header/demo/responsive.vue |  2 +-
 components/page-header/index.tsx           |  6 +++++-
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 components/_util/hooks/useDestroyed.ts

diff --git a/components/_util/hooks/useDestroyed.ts b/components/_util/hooks/useDestroyed.ts
new file mode 100644
index 000000000..d5cd6b0f4
--- /dev/null
+++ b/components/_util/hooks/useDestroyed.ts
@@ -0,0 +1,12 @@
+import { onBeforeUnmount, ref } from 'vue';
+
+const useDestroyed = () => {
+  const mounted = ref(true);
+  onBeforeUnmount(() => {
+    mounted.value = false;
+  });
+
+  return mounted;
+};
+
+export default useDestroyed;
diff --git a/components/page-header/demo/responsive.vue b/components/page-header/demo/responsive.vue
index 8c95fde7b..baa965751 100644
--- a/components/page-header/demo/responsive.vue
+++ b/components/page-header/demo/responsive.vue
@@ -9,7 +9,7 @@ title:
 
 ## zh-CN
 
-在不同大小的屏幕下，应该有不同的表现
+在不同大小的屏幕下，应该有不同的表现。
 
 ## en-US
 
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index bbcc2d8d2..f94263dd9 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -12,6 +12,7 @@ import { withInstall } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 import ResizeObserver from '../vc-resize-observer';
+import useDestroyed from '../_util/hooks/useDestroyed';
 
 export const pageHeaderProps = {
   backIcon: PropTypes.any,
@@ -37,8 +38,11 @@ const PageHeader = defineComponent({
   setup(props, { emit, slots }) {
     const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props);
     const compact = ref(false);
+    const isDestroyed = useDestroyed();
     const onResize = ({ width }: { width: number }) => {
-      compact.value = width < 768;
+      if (!isDestroyed.value) {
+        compact.value = width < 768;
+      }
     };
     const ghost = computed(() => props.ghost ?? pageHeader.value?.ghost ?? true);