「Vue系列」之Vue2实现当前组件重新加载

大家好，欢迎来到IT知识分享网。

其他办法：
使用vue-router重新定向到当前页面，页面不刷新
使用window-reload（） 页面全部刷新，用户体验太差

解决方法：
使用v-if provide inject和this.$nextTick()【版本限制 vue2.2.0】

原理：
使用v-if控制router-view的显示或隐藏（v-if会把事件监听器和自组件适当的销毁或者重建）
使用provide / inject组合解决自组件层级比较深的问题
使用this.$nextTick()实现页面异步刷新

provide / inject
就是父组件中使用provide提供变量(对象或者是一个函数),在子组件中通过inject来注入变量
不管层级有多深，并在起上下游关系成立的时间始终生效

this.$nextTick()
当dom发生变化，更新后执行的回调

实际代码：
在App.vue里面，声明reload方法，然后通过provide把reload方法注入，使用bol值控制router-view隐藏（销毁），再通过this.$nextTick()在dom更新之后利用bol控制router-view重新加载，实现页面刷新的效果

<template>
  <div id="app">
    <router-view v-if="isRouterShow"/>
  </div>
</template>
<script>
export default { 
   
  name: 'App',
  provide () { 
   
    return { 
   
      reload: this.reload
    }
  },
  data () { 
   
    return { 
   
      isRouterShow: true
    }
  },
  methods: { 
   
    async reload () { 
   
      this.isRouterShow = false
      await this.$nextTick()
      this.isRouterShow = true
    }
  }
}
</script>

在子组件里面
使用inject注入App.vue提供的reload依赖，然后在需要的地方直接调用this.reload()方法即可

export default { 
   
  inject: ['reload'],
  methods: () { 
   
  	reloadFun () { 
   
  		this.reload()
  	}
  }
 }

Vue提倡数据驱动dom，但是存在特殊情况，如果有更好的解决方法，请多多指教！

欢迎关注公众号：廿九前端营地
可以获取前端资源、大厂外企内推或者联系我一起学习吹水

Tipes：往期精选
「Vue系列」之面试官问NextTick是想考察什么？
「Vue系列」之为什么用Proxy取代Object.defineProperty？
「Vue系列」之Vue3生命周期和新增setup的一些总结
「Vue系列」之Vue3初尝试Cannot find module ‘worker_threads‘报错
「Vue系列」之重新探索v-if和v-show
「Vue系列」之Vue2的数据劫持、发布订阅者模式、diff算法
「Vue系列」之Vue2实现当前组件重新加载