遇到问题的场景：
需要把当前组件完全还原成初始化状态，不要页面全部刷新
例如：重置按钮，只刷新当前加载组件
其他办法：
使用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'],
watch: {
'$route.query.index'(){
this.reload()
}
}
}当路由从
door?index=0&dateName=normal变到如下情况时，就会重载当前页面
door?index=1&dateName=normal这样在路由变化的时候，就会更新当前页面了
Vue提倡数据驱动dom，但是存在特殊情况，如果有更好的解决方法，请多多指教！
