perf: ref to shallowRef

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)

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

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[] = []

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>

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) => {

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 () => {

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')

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,

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>
 

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()