vue加载数据闪烁,vue 闪烁
本文主要介绍了vue对刷新页面时变量闪烁问题的解决方案，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
刷新页面时会有变量闪烁。解决方法是：v-coalk vue刷新当前页面不闪烁。场景：刷新当前页面的方法。provide/inject的组合介绍了provide/inject的组合如何刷新页面而不闪烁。
刷新页面时会出现变量闪烁问题
使用vue绑定数据时，刷新页面时变量会闪烁，
解决办法是： v-cloak
按如下方式修改代码：
v形斗篷
p{{value.name}}/p
/div
vue刷新当前页面，且页面不闪烁
场景：
在处理列表时，经常需要在删除一条数据或添加新数据后刷新当前页面。当你需要在中英文网站之间切换的时候，一般的概念是当页面数据发生变化，需要检索数据或者刷新当前页面的时候。
刷新当前页的方法
使用window.reload()或router.go(0)刷新时，整个浏览器重新加载，闪烁，用户体验不好。提供/注入组合
provide/inject 组合介绍
角色：允许一个祖先组件将一个依赖注入到它的所有后代中，不管组件级别有多深。
Provide:是一个对象，或者是一个返回对象的函数。它包含了后代的东西，也就是属性和属性值。(注意：后代层的提供者会覆盖祖父层的提供者中相同键的属性值。)注入：一个字符串数组，或者一个对象。属性值可以是对象，包括起始值和默认值。from是用于在可用的注入内容中进行搜索的关键字(字符串或符号)，这意味着祖父的多层提供者提供了大量数据。from属性指定采用哪个键；指定默认值。
provide/inject 组合如何实现页面不闪烁刷新
在App.vue中声明reload方法，控制router-view的显示或隐藏，从而控制页面的重载。
模板
div id=app v-if=isRouterAlive
点火电极
router-view v-if= $ route . meta . keepalive /
/保持活力
路由器-查看v-if=！$route.meta.keepAlive /
/div
/模板
导出默认值{
名称：“应用程序”，
提供(){
返回{
重新加载：this.reload
}
},
data() {
返回{
isRouterAlive:真
}
},
方法：{
reload() {
this.isRouterAlive=false
这个。$nextTick(()={
this.isRouterAlive=true
})
}
}
}
将App.vue组件提供的reload依赖注入到页面中，逻辑完成后(删除或添加…)，引入(注入)到子组件中然后直接调用this.reload()刷新当前页面。
导出默认值{
注入：[reload]，
方法：{
登录(){
this.reload()
}
}
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。