From 464575b23729d9dedb86392b2d46004052eb8b75 Mon Sep 17 00:00:00 2001
From: Plumbiu <99574369+Plumbiu@users.noreply.github.com>
Date: Thu, 16 Feb 2023 20:09:27 +0800
Subject: [PATCH] perf: ref to shallowRef

---
 .../components/ArticlesContent/SideBar/Left/index.vue  |  6 +++---
 .../ArticlesContent/SideBar/Right/Catalogue.vue        | 10 +++++-----
 .../ArticlesContent/SideBar/Right/Column.vue           |  2 +-
 .../ArticlesContent/SideBar/Right/RelatedArticles.vue  |  2 +-
 frontend/components/Aside/Advertisements.vue           |  2 +-
 frontend/components/Aside/AuthorList.vue               |  4 ++--
 frontend/components/Aside/Sign.vue                     |  4 ++--
 frontend/components/Aside/SuspensionPanel.vue          |  2 +-
 frontend/components/Aside/index.vue                    |  2 +-
 frontend/components/Navs/index.vue                     |  2 +-
 10 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/components/ArticlesContent/SideBar/Left/index.vue b/frontend/components/ArticlesContent/SideBar/Left/index.vue
index f68e89ca..224c457f 100644
--- a/frontend/components/ArticlesContent/SideBar/Left/index.vue
+++ b/frontend/components/ArticlesContent/SideBar/Left/index.vue
@@ -3,10 +3,10 @@ defineProps<{
   commented: Number
   liked: Number
 }>()
-const isLiked = ref(false)
+const isLiked = shallowRef(false)
 const route = useRoute()
-const url = ref(`/api/articles/update/like?id=${route.params.id}`)
-const newLike = ref(0)
+const url = shallowRef(`/api/articles/update/like?id=${route.params.id}`)
+const newLike = shallowRef(0)
 const handleLike = async () => {
   if (!isLiked.value) {
     const { data } = await useFetch(url)
diff --git a/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue b/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue
index 08d088c8..29d891c6 100644
--- a/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue
+++ b/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 /**
  * @description: 目录点击事件
  */
-const isActive = ref<number>()
+const isActive = shallowRef<number>()
 const activeSelect = (index: number) => {
   if (isActive.value === index)
     return
@@ -33,10 +33,10 @@ const catalogueClass = (level: number) => {
 const itemOffsetTop = ref<{ key: number; top: number }[]>([])
 const navRef = ref()
 const liRef = ref<HTMLElement[]>([])
-const navMid = ref(0)
-const headerHeight = ref(0)
-const catalogueEleTop = ref(0)
-const currentScrollTop = ref(0)
+const navMid = shallowRef(0)
+const headerHeight = shallowRef(0)
+const catalogueEleTop = shallowRef(0)
+const currentScrollTop = shallowRef(0)
 
 const getInitByScroll = () => {
   navMid.value = navRef.value.clientHeight / 2
diff --git a/frontend/components/ArticlesContent/SideBar/Right/Column.vue b/frontend/components/ArticlesContent/SideBar/Right/Column.vue
index 41092ccc..6d6f9b4d 100644
--- a/frontend/components/ArticlesContent/SideBar/Right/Column.vue
+++ b/frontend/components/ArticlesContent/SideBar/Right/Column.vue
@@ -2,7 +2,7 @@
 import type { IColumn, IColumnArticleItem } from '@/types/IArticle'
 const props = defineProps<{ column?: IColumn }>()
 const route = useRoute()
-const currentId = ref(route.params.id)
+const currentId = shallowRef(route.params.id)
 const nextArticle = ref<IColumnArticleItem>()
 
 let allColumnList: IColumnArticleItem[] = []
diff --git a/frontend/components/ArticlesContent/SideBar/Right/RelatedArticles.vue b/frontend/components/ArticlesContent/SideBar/Right/RelatedArticles.vue
index ddfdfdf8..06081608 100644
--- a/frontend/components/ArticlesContent/SideBar/Right/RelatedArticles.vue
+++ b/frontend/components/ArticlesContent/SideBar/Right/RelatedArticles.vue
@@ -9,7 +9,7 @@ const props = defineProps({
 })
 const { data: ArticleList } = await useFetch(`/api/articles/tags?tags=${JSON.stringify(props.tags.data)}&authorId=${props.author.id}`)
 const route = useRoute()
-const id = ref(route.params.id)
+const id = shallowRef(route.params.id)
 // 过滤掉当前文章
 const articleList = ArticleList.value.filter(item => item.id !== id.value)
 </script>
diff --git a/frontend/components/Aside/Advertisements.vue b/frontend/components/Aside/Advertisements.vue
index 56866b25..ea90ce8d 100644
--- a/frontend/components/Aside/Advertisements.vue
+++ b/frontend/components/Aside/Advertisements.vue
@@ -5,7 +5,7 @@ const props = defineProps({
     required: true,
   },
 })
-const is_show_list = reactive({ ...Array<Boolean> })
+const is_show_list = shallowReactive({ ...Array<Boolean> })
 for (let i = 0; i < props.ads.length; i++)
   is_show_list[i] = true
 const turn_off = (i: number) => {
diff --git a/frontend/components/Aside/AuthorList.vue b/frontend/components/Aside/AuthorList.vue
index 64be50f4..e5304c00 100644
--- a/frontend/components/Aside/AuthorList.vue
+++ b/frontend/components/Aside/AuthorList.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useAutoAnimate } from '@formkit/auto-animate/vue'
 const [parent] = useAutoAnimate()
-const page = ref(1)
-const AuthorList = ref([]) as any
+const page = shallowRef(1)
+const AuthorList = shallowRef([]) as any
 const { data } = (await useFetch(`/api/authors/list?page=${page.value}`))
 AuthorList.value = data.value
 const showAll = async () => {
diff --git a/frontend/components/Aside/Sign.vue b/frontend/components/Aside/Sign.vue
index 41ce82f3..f4963e6a 100644
--- a/frontend/components/Aside/Sign.vue
+++ b/frontend/components/Aside/Sign.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-let day_parts = ref('')
+let day_parts = shallowRef('')
 if (process.client)
   day_parts = useDayParts()
-const is_sign = ref(false)
+const is_sign = shallowRef(false)
 const sign = () => {
   is_sign.value = true
   document.querySelector('.sign_btn')?.classList.remove('unSigned')
diff --git a/frontend/components/Aside/SuspensionPanel.vue b/frontend/components/Aside/SuspensionPanel.vue
index fda1790c..5091a6de 100644
--- a/frontend/components/Aside/SuspensionPanel.vue
+++ b/frontend/components/Aside/SuspensionPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useWindowScroll } from '@vueuse/core'
-const { x, y } = useWindowScroll()
+const { y } = useWindowScroll()
 const to_top = () => {
   window.scrollTo({
     top: 0,
diff --git a/frontend/components/Aside/index.vue b/frontend/components/Aside/index.vue
index b7a4a357..325b0fa6 100644
--- a/frontend/components/Aside/index.vue
+++ b/frontend/components/Aside/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useWindowScroll } from '@vueuse/core'
 const { data: GlobalData } = await useFetch('/api/global')
-const { x, y } = useWindowScroll()
+const { y } = useWindowScroll()
 const isNavShown = inject('isNavShown')
 </script>
 
diff --git a/frontend/components/Navs/index.vue b/frontend/components/Navs/index.vue
index d5d1ab02..c5ea56b9 100644
--- a/frontend/components/Navs/index.vue
+++ b/frontend/components/Navs/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-const pageNum = ref(1)
+const pageNum = shallowRef(1)
 const { data: NavList } = await useFetch('/api/global/navs')
 const pageTotal = Math.ceil(NavList.value.length / 9.0)
 const route = useRoute()