标签：elf fan ted 现在 count date() one new 特定
v-for里面数据层次太多，或者套的组件层级太多， 数据变了，页面没有重新渲染，需手动强制刷新。
解决方法：运用 this.$forceUpdate()强制刷新
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
-------------------------------------------------------------------------------------------------------------------------------------
vue强制重新渲染四种方案对比
Vue的双向绑定属于自动档；在特定的情况下，需要手动触发“刷新”操作，目前有四种方案可以选择：
router.go(0)
如果是刷新某个子组件，则可以通过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>
组件内置$forceUpdate方法，使用前需要在配置中启用。
import Vue from ‘vue‘
Vue.forceUpdate()
<template>
<div>
<button @click="handleUpdateClick()">Refresh当前组件</button>
</div>
</template>
export default {
methods: {
handleUpdateClick() {
// built-in
this.$forceUpdate()
}
}
}
原理很简单，vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。
<template>
<div>
<span :key="key"></span>
</div>
</template>
<script>
export default {
data() {
return {
key: 0
}
},
methods: {
handleUpdateClick() {
this.key += 1 // 或者 this.key = new Date();
}
}
}
</script>
有些列表页面需要进入详情返回时有缓存功能，但是每次进入列表页面又需要刷新列表，这种时候就需要手动刷新页面
const routerConfig = { path: "/List", query: { time: new Date().getTime(), } }; this.goPath(routerConfig);
List.vue created () { this.initData(); this.preTime = Number(this.$route.query.time); }, activated () { const curTime = Number(this.$route.query.time); if(this.preTime !== curTime) { document.documentElement.scrollTop = 0; this.preTime = curTime; this.listInfo = { pageSize: 10, pageContext: ‘‘, hasMore: false, list: [], }; this.initData(); } },
goPath是vue跳转的一个封装
main.js /** * 根据前端路由跳转到webview * @param config * @param type inPage: 利用h5路由跳转 */ Vue.prototype.goPath = function (routerConfig, type = ‘web‘) { const config = routerConfig; // 统一添加参数 if (this.$route.query.isSelfManage === ‘1‘) { config.query.isSelfManage = 1; } console.log(config); if (window.__wxjs_environment === ‘miniprogram‘) { if (window.wx) { const params = this.$router.resolve(config).href; // 添加参数，兼容跳转问题 const toUrl = `${location.protocol}//${location.host}${location.pathname}${location.search}${params}`; if (type === ‘web‘) { window.wx.miniProgram.navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(toUrl)}`, }); } else if (type === ‘inPage‘) { this.$router.push(config); if (!config.replace) { this.$router.push(config); } else { this.$router.replace(config); } } else { window.wx.miniProgram.navigateTo(config); } } } else { if (!config.replace) { this.$router.push(config); } else { this.$router.replace(config); } } };
例如：进入页面输入框自动聚焦
一般情况下，加上以下代码就可以聚焦
<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>
方案对比转载自：(2条消息) Vue组件强制刷新（重新渲染）的四种方案对比_落花见流水的博客-CSDN博客
vue $forceUpdate() 强制重新渲染及四种方案对比
标签：elf fan ted 现在 count date() one new 特定
原文地址：https://www.cnblogs.com/YiFeng-Liu/p/14835986.html
