文章目录[隐藏]
目录
方法1:直接调用函数
将整个页面重载, 以下两种都可以
1.window.location.reload()
2.this.$router.go()
方法2:采用provide / inject(静刷新)
在高阶函数中声明一个reload刷新函数
<template> <div id="app" v-if="show"></div> </template> <script> export default { // 控制显示/隐藏, 实现刷新 data () { return { show: true } }, // 把刷新的方法传给低阶组件 provide () { return { reload: this.reload } }, methods: { // 高阶组件定义刷新方法 reload () { this.bol = false this.$nextTick(() => { this.bol = true }) } } } </script>
在低阶组件中使用刷新函数
<template> <div></div> </template> <script> export default { inject: ['reload'], methods: { // 低阶组件, 刷新 fun () { this.reload() } } } </script>
优势比较
- 方法1中直接调用函数, 会导致整个网站刷新,会浪费性能些,用户体验也不好; 大型网站这样刷新下,需要等几秒浏览器左上角可以看到刷新的动画;
- 方法2中采用provide / inject, 用户不会感觉到刷新, 而且刷新的页面内容范围可控制, 相对浪费性能会少很多
以上就是应用provide与inject刷新Vue页面方法的详细内容,更多关于Vue页面刷新的资料请关注华域联盟其它相关文章!
您可能感兴趣的文章:
- vue中的provide/inject的学习使用
- Vue.js中provide/inject实现响应式数据更新的方法示例
- vue3中provide和inject的使用
- vue中使用[provide/inject]实现页面reload的方法
- vue项目刷新当前页面的三种方法
- 聊聊Vue中provide/inject的应用详解
本文由 华域联盟 原创撰写:华域联盟 » 应用provide与inject刷新Vue页面方法
转载请保留出处和原文链接:https://www.cnhackhy.com/82208.htm