1.刷新整个页面
this.$router.go(0)
window.location.reload();
2.使用v-if标记
如果是刷新某个子组件,则可以通过v-if指令实现。我们知道,当v-if的值发生变化时,组件都会被重新渲染一遍。因此,利用v-if指令的特性,可以达到强制刷新组件的目的。
<template>
<comp v-if="refresh"></comp>
<button @click="refreshComp()">刷新comp组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
name: 'parentComp',
data() {
return {
refresh: true
}
},
methods: {
refreshComp() {
// 移除组件
this.refresh = false
// 在组件移除后,重新渲染组件
// this.$nextTick可实现在DOM 状态更新后,执行传入的方法。
this.$nextTick(() => {
this.refresh = true
})
}
}
}
</script>
3.使用内置的this.$forceUpdate方法
组件内置this.$forceUpdate方法,使用前需要在配置中启用。
注意:forceUpdate只会强制更新页面,不会更新现有的计算属性。
import Vue from 'vue'
Vue.forceUpdate()
<template>
<div>
<button @click="handleUpdateClick()">Refresh当前组件</button>
</div>
</template>
export default {
methods: {
handleUpdateClick() {
// built-in
this.$forceUpdate()
}
}
}
4.使用key-changing优化组件
原理很简单,vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。
<template>
<div>
<span :key="componentKey"></span>
</div>
</template>
<script>
export default {
data() {
return {
componentKey: 0
}
},
methods: {
forceRerender() {
this.componentKey += 1 // 或者 this.componentKey = new Date();
}
}
}
</script>
5.应用实例——进入页面输入框自动聚焦(页面有缓存时,只有第一次进入页面生效)
一般情况下,使用指令
<template>
<div>
<input
placeholder="大家都在搜"
type="text"
maxlength="500"
v-model="inputInfo.msg"
@blur="resizeView"
v-focus
>
</div>
</template>
<script>
export default {
data() {
return {
inputInfo: { // 输入框对象
num: 0, // 字数
msg: '' // 内容
},
}
},
watch: {
[`options.msg`] () {
let length = utils.fancyCount2(this.inputInfo.msg);
this.$set(this.inputInfo, 'num', length);
}
},
directives: {
focus: {
// 指令的定义
inserted: function(el) {
el.focus();
}
}
},
methods: {
/**
* input元素失去焦点时触发
*/
resizeView () {
document.body.scrollIntoView(true);
},
}
}
</script>
但是在有缓存的页面,一般就只有第一次会聚焦,后面进入都不会聚焦,办法就是用第四种强制刷新输入框来聚焦
<template>
<div>
<input
placeholder="大家都在搜"
type="text"
maxlength="500"
v-model="inputInfo.msg"
@blur="resizeView"
v-focus
:key="inputInfo.focus"
>
<button @click="handleUpdateClick()">Refresh当前组件</button>
</div>
</template>
<script>
export default {
data() {
return {
inputInfo: { // 输入框对象
num: 0, // 字数
msg: '', // 内容
focus: '',
},
}
},
activated () {
this.inputInfo.focus = new Date().getTime();
},
methods: {
handleUpdateClick() {
// built-in
this.inputInfo.focus = new Date().getTime();
}
}
</script>
6.使用provide/inject强制刷新
也是使用v-if原理,只是子组件中根据父组件中的值进行强制刷新
7.watch监听路由,当路由发生变化时,页面没有刷新,可以监听他的路由,当路由发生变化时,刷新页面或者触发动作,使得整个页面刷新
watch: {
$route: {
handler(newVal, oldVal) {
if (newVal.query.code !== oldVal.query.code)
或者
newVal.params.id !== odl.params.id
{
//调用组价
// this.$emit("");
//执行函数
//this.bindwx();
}
}
}
}
子路由触发父路由的方法,如果有多层路由,需要由子路由发出动作再一层一层的传上去,
如孙子路由 this.$emit(“updatekeyFn”);
<view-router @updatekeyFn="updatekeyFn()"/>