perf: 减少响应式变量使用

truthRestorer · Sep 7, 2023 · 348b2a5 · 348b2a5
1 parent 022f8ab
commit 348b2a5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/dry-steaks-fail.md b/.changeset/dry-steaks-fail.md
@@ -0,0 +1,5 @@
+---
+'truth-cli': patch
+---
+
+减少响应式数据，提高网页性能
diff --git a/packages/web/src/components/Drawer/Json/index.vue b/packages/web/src/components/Drawer/Json/index.vue
@@ -17,5 +17,3 @@ defineProps<{
   <Versions v-else-if="type === 'versions'" :data="data" />
   <Extra v-else-if="type === 'extra'" :data="data" />
 </template>
-
-<style scoped></style>
diff --git a/packages/web/src/components/Header/index.vue b/packages/web/src/components/Header/index.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { Aim, Download, Search } from '@element-plus/icons-vue'
-import { type Ref, inject, ref } from 'vue'
+import { type Ref, inject } from 'vue'
 import type { Legend, PkgInfo } from '../../types'
 import { changeGraphRoot, collapseNode, download, getPkgInfo, toggleChart } from '../../utils/'
 
 const pkgName = inject<Ref<string>>('pkgName')!
 const pkgInfo = inject<Ref<PkgInfo>>('pkgInfo')!
 const drawer = inject<Ref<boolean>>('drawer')!
 const isAim = inject<Ref<boolean>>('isAim')!
-const legend = ref<Legend>('Graph')
+let legend: Legend = 'Graph'
 let target = '__root__'
 
+function handleLegend() {
+  legend = toggleChart(legend)
+}
+
 function handleGraphRoot() {
-  if (legend.value !== 'Graph' || pkgName.value === '__root__')
+  if (legend !== 'Graph' || pkgName.value === '__root__')
     return
   if (!isAim.value)
     target = pkgName.value
@@ -57,7 +61,7 @@ const handleSearch = debounce(() => {
       <ElButton @click="drawer = !drawer">
         {{ drawer ? '关闭' : '打开' }}信息框
       </ElButton>
-      <ElButton @click="() => legend = toggleChart(legend)">
+      <ElButton @click="handleLegend">
         切换图表
       </ElButton>
       <Link />