vue刷新页面的两种方法(provide / inject的应用)

方法1：直接调用函数

将整个页面重载, 以下两种都可以

1. window.location.reload()
2. this.$router.go(0)

---

方法2：采用provide / inject(静刷新)

1. 在高阶函数中声明一个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>
   

2. 在低阶组件中使用刷新函数

   <template>
     <div></div>
   </template>
   
   <script>
   export default {
     inject: ['reload'],
     methods: {
       // 低阶组件, 刷新
       fun () {
         this.reload()
       }
     }
   }
   </script>
   

---

优势比较

1. 方法1中直接调用函数, 会导致整个网站刷新，会浪费性能些，用户体验也不好; 大型网站这样刷新下，需要等几秒浏览器左上角可以看到刷新的动画;
2. 方法2中采用provide / inject, 用户不会感觉到刷新, 而且刷新的页面内容范围可控制, 相对浪费性能会少很多