Vue页面刷新方法(子组件改变数据后兄弟组件刷新，不闪烁)

问题描述

• 今天在做个人博客的时候遇到了这样一个问题，一个文章详情页面使用了评论显示组件和发表评论组件，但是当评论发表完成后评论显示组件的数据不会自动渲染出来，那么如何让最新的数据渲染呢

问题分析

• 可以看出这两个组件是兄弟组件，在评论显示组件中，是通过 mounted 生命周期函数获取数据的，也就是 el 挂载到实例上时获取的，但是当发表评论数据库内容变化后，并不能主动去获取数据的更新

问题解决

方案一(通用)

• location.reload()
• 缺点： 页面闪烁

方案二(通用)

• 路由方法： this.$router.go(0)
• 缺点：同样会闪烁，页面内容多可能会有很久的留白

方案三(适用于当前页面中有router-view的情况)

• provide / inject 方法
• 原理： 允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
• 在App.vue里声明reload方法，控制 router-view 的显示或隐藏来控制页面的再次加载

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

• 在需要用到刷新的页面。在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加…）,直接this.reload()调用，即可刷新当前页面

方案四(兄弟组件数据变化的刷新)

• 在数据添加成功的回调函数中先跳转到一个假路由，再跳转回来

let NewPage = "_empty" + "?time=" + new Date().getTime() / 500;
this.$router.push(NewPage);
this.$router.go(-1);

• 因为这时数据已经添加到数据库中，我们只需要在 updated 生命周期中重新获取一下即可
• 这种方式也不会造成页面的闪烁，就像直接显示出来了一样

总结

• 刷新页面的方法有很多，根据不同的需求选择不同的方法，对于我在 updated 生命周期中重新获取的方法可能不是最简单的，如果有更好的解决方法，麻烦大佬指正