Vue3如何实现刷新页面局部内容

想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染。在Vue中,想要实现这一效果最简便的方式方法就是使用v-if 指令。

在Vue2中我们除了使用v-if 指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面。

如何在Vue3.X中实现点击刷新按钮重新加载红框内的DOM,并显示相应的加载状态?。

Vue3如何实现刷新页面局部内容

由于Vue3.X中script setup 语法中组件内守卫只有onBeforeRouteUpdate 及onBeforeRouteUpdate 两个API,因此我们来借助v-if 指令使局部dom重新渲染来实现这一需求。

第一步:定义状态标识

在全局状态中定义一个isRouterAlive 标识刷新状态,根据isRouterAlive 变化来重新渲染。isLoading 标识加载状态。

import { defineStore } from '
pinia'

export const useAppStore = defineStore({
id: '
app'
,
state: () =>

({
isRouterAlive: true,
isLoading: false
} as { isRouterAlive: boolean;
isLoading: boolean })
}) 第二步、借用v-if 指令让dom节点重新渲染<
template>

<
div class="
common-layout"
>

<
el-container>

<
SideMenuView :collapse="
isCollapse"
>
<
/SideMenuView>

<
el-container>

<
NavMenuView v-model:collapse="
isCollapse"
>
<
/NavMenuView>

<
TabsView>
<
/TabsView>

<
!--核心 start-->

<
el-main
v-loading="
appStore.isLoading"

element-loading-text="
页面加载中……"

element-loading-background="
rgba(0, 0, 0, 0.8)"

>

<
router-view v-if="
appStore.isRouterAlive"
>
<
/router-view>

<
/el-main>

<
!--核心 end-->

<
el-footer>
Footer<
/el-footer>

<
/el-container>

<
/el-container>

<
/div>

<
/template>


<
script setup lang="
ts"
>

import SideMenuView from '
./SideMenuView.vue'

import NavMenuView from '
./NavMenuView.vue'

import TabsView from '
./TabsView.vue'

import { useAppStore } from '
@/stores/app'

const appStore = useAppStore()
const isCollapse = ref(false)
<
/script>


<
style lang="
scss"
scoped>

…… CSS样式
<
/style>
第三步、修改isRouterAlive 值,实现dom的重新渲染<
template>

<
div
class="
tabs-item cursor-pointer arrow-down"

ref="
buttonRef"

@click="
onClickOutside"

>

<
el-icon>
<
ArrowDownBold />
<
/el-icon>

<
/div>

<
el-popover
ref="
popoverRef"

trigger="
hover"

virtual-triggering
:virtual-ref="
buttonRef"

>

<
div class="
arrow-down-item"
@click="
handleCommand('
refresh'
)"
>
刷新<
/div>

<
div class="
arrow-down-item"
@click="
handleCommand('
closeOther'
)"
>

关闭其他
<
/div>

<
div class="
arrow-down-item"
@click="
handleCommand('
closeLeft'
)"
>

关闭左侧
<
/div>

<
div class="
arrow-down-item"
@click="
handleCommand('
closeRight'
)"
>

关闭右侧
<
/div>

<
/el-popover>

<
/template>


<
script setup lang="
ts"
>

import { CloseBold, ArrowDownBold } from '
@element-plus/icons-vue'

import type { MenuItem } from '
@/interface/menu'

import { useMenuRouterStore } from '
@/stores/menu-router'

import { useTabsStore } from '
@/stores/tabs'

import { useAppStore } from '
@/stores/app'

const router = useRouter()
const menuRouterStore = useMenuRouterStore()
const tabsStore = useTabsStore()
const appStore = useAppStore()
// tabs功能操作
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () =>
{
unref(popoverRef).popperRef?.delayHide?.()
}
const handleCommand = (command: string) =>
{
if (command === '
refresh'
) {
appStore.isLoading = true // 展示数据加载状态
appStore.isRouterAlive = false // 设置为false,卸载dom
setTimeout(() =>
{ // 此处采用了定时器,并没有采用网上比较常见的nextTick
appStore.isRouterAlive = true // 设置为true,重新挂载dom
appStore.isLoading = false // 隐藏数据加载状态
}, 500)
} else if (command === '
closeOther'
) {
tabsStore.closeOther()
} else {
tabsStore.closeLeftOrRight(command)
}
}
// ……
<
/script>


<
style lang="
scss"
scoped>

…… CSS样式
<
/style>


Vue3是一个流行的JavaScript框架,它帮助开发者在web应用程序中构建可重用组件。其中,最常见的问题可能就是如何实现渲染页面时的局部刷新。Vue3提供了两种方式来实现此目的:动态组件和异步组件。
动态组件
动态组件是一种将组件作为值传递给Vue实例并进行动态呈现的技术。Vue3中可以使用动态组件来达到刷新局部内容的目的。这种方式将根据条件在Vue3模板中将组件插入DOM。
首先,需要创建一个可以被动态显示的组件,我们可以使用Vue.extend方法将一个组件转换为动态组件。然后,在Vue3实例中,可以使用v-bind:is指令来指定动态组件的名字。
使用动态组件的好处是可以避免每次切换组件时重新加载整个应用程序。Vue3将动态组件集成到其框架中,使得实现局部刷新更加容易。
异步组件
异步组件是一种优化技巧,可以延迟加载并缓存组件。Vue3中,可以通过使用webpack的代码分割功能来实现异步组件。异步组件的加载不会阻塞应用程序的其他部分,因此可以提高整个应用程序的性能。
在Vue3中,可以使用import()语法异步加载组件,并通过cache选项进行缓存。然后,可以使用异步组件来减少页面加载时间,从而提高应用程序的性能。
总结
Vue3提供了多种方法来实现局部刷新,包括动态组件和异步组件。使用这些技术可以优化应用程序的性能,并提高用户的体验。作为开发者,可以根据自己的需求和实际场景选择适合自己的技术,以实现最佳的效果。Vue3的灵活性和易用性使得它成为现代web应用程序开发中的一个重要工具。