From 9ab3fd19ef6c1ea9b2e1b6d957627da66b9782f3 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 4 Dec 2022 14:42:12 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=B8=BB=E9=A2=98=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E6=94=BE=E5=9C=A8=20`onBeforeMount`=20=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=E5=88=9D=E5=A7=8B=E5=8C=96=E9=A1=B5=E9=9D=A2=E9=97=AA?=
 =?UTF-8?q?=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/setting/index.vue | 32 ++++++++++++++++---------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index ba2d84ddf..69af67ade 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -1,4 +1,13 @@
 <script setup lang="ts">
+import {
+  ref,
+  unref,
+  watch,
+  reactive,
+  computed,
+  nextTick,
+  onBeforeMount
+} from "vue";
 import {
   useDark,
   debounce,
@@ -17,7 +26,6 @@ import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
 import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { ref, unref, watch, reactive, computed, nextTick } from "vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 
 import dayIcon from "@/assets/svg/day.svg?component";
@@ -189,16 +197,6 @@ function setLayoutModel(layout: string) {
   useAppStoreHook().setLayout(layout);
 }
 
-/* 初始化项目配置 */
-nextTick(() => {
-  settings.greyVal &&
-    document.querySelector("html")?.setAttribute("class", "html-grey");
-  settings.weakVal &&
-    document.querySelector("html")?.setAttribute("class", "html-weakness");
-  settings.tabsVal && tagsChange();
-  dataThemeChange();
-});
-
 watch($storage, ({ layout }) => {
   switch (layout["layout"]) {
     case "vertical":
@@ -218,6 +216,18 @@ watch($storage, ({ layout }) => {
       break;
   }
 });
+
+onBeforeMount(() => {
+  dataThemeChange();
+  /* 初始化项目配置 */
+  nextTick(() => {
+    settings.greyVal &&
+      document.querySelector("html")?.setAttribute("class", "html-grey");
+    settings.weakVal &&
+      document.querySelector("html")?.setAttribute("class", "html-weakness");
+    settings.tabsVal && tagsChange();
+  });
+});
 </script>
 
 <template>