vue项目刷新当前页面的几种解决方案对比:如何优雅的强制重新渲染子组件
一般刷新页面可以用 location.reload(true),history.go(0) 等方法,但是这对vue项目很不友好,会使页面重新加载出现暂时性的空白,而且耗费性能,所以vue项目最好不用这些方法。vue有this.$forceUpdate()可以强制更新,下面介绍其他更好的方法。
一、带上当前页面路由跳转到一个重定向的页面,重定向页面再跳转回来
// 1、新建refresh.vue
<script>
export default {
name: "refresh",
beforeCreate(){
this.$router.push(this.$route.query.path)
},
};
</script>
// 2、router.js配置一个refresh路由
import refresh from './components/refresh.vue'
{
path: '/refresh',
name: 'refresh',
component: refresh
},
// 3、在要刷新的地方跳转传参即可
reflesh(){
this.$router.push({path:'/refresh',query:{path:this.$route.fullPath}})
},
有一个问题是点击浏览器返回相当于没点击,因为跳转的是refresh页面,而refresh又会跳回原页面。所以并不合适。
二、通过 provide 和 inject 结合 v-if 的功能触发页面刷新
这对选项需要一起使用,以允许一个根组件向其所有子组件注入一个依赖,实现原理就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show -> false -> show
1、修改app.vue,利用 v-if 可以刷新页面的属性,同时使用 provide 和 inject 将祖先节点的数据传递给子代节点
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide (){
return {
reload:this.reload
}
},
data(){
return {
isRouterAlive:true
}
},
methods:{
reload (){
this.isRouterAlive = false
this.$nextTick(function(){
this.isRouterAlive = true
})
}
},
components:{
}
}
</script>
2、在要刷新的子路由页面引入inject,然后执行reload事件即可刷新页面
export default {
name: "demo",
inject:['reload'],
data() {
return {}
},
methods: {
reflesh(){
this.reload()
},
}
}
三、使用内置的forceUpdate
方法(较好的)
组件内置$forceUpdate
方法,使用前需要在配置中启用
import Vue from 'vue'
Vue.forceUpdate()
export default {
methods: {
handleUpdateClick() {
this.$forceUpdate()
}
}
}
由于一些嵌套特别深的数据,导致数据更新了,但是页面却没有重新渲染。我遇到的一个情况是,v-for遍历数据渲染,当方法中处理相应数组数据时,数组改变了,但是页面却没有重新渲染。
解决方法:运用 this.$forceUpdate()
强制刷新,解决v-for更新数据不重新渲染页面。
官方解释:迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
四、使用key-changing
优化组件(最好的)
key-changing的原理很简单,vue使用key
标记组件身份,当key
改变时就是释放原始组件,重新加载新的组件。
<template>
<div>
<!-- 父组件 -->
<div>
<button @click="reLoad">点击重新渲染子组件</button>
</div>
<!-- 内容库子组件 -->
<lib-window :key="time" :channelCode="searchChannelCode"></lib-window>
</div>
</template>
<script>
import children from '@/components/parent/children'
export default {
name: 'contentLib',
components: { libWindow },
data () {
return {
time: ''
}
},
methods: {
reLoad () {
this.time = new Date().getTime()
}
}
}
</script>
我们通过 :key
实现,当key 值变更时,会自动的重新渲染,key的作用主要是为了高效的更新虚拟DOM。推荐使用这种。