vue 强制组件重新渲染（重置）

数据通过异步操作后，对之前刚加载的数据进行变更后，发现数据不能生效，此时可以使用强制刷新，方案有很多，在此举例三种方案

方案一 : key值法（官方推荐，具体移步至官网） 

原理：key值变化之后，会自动重新渲染组件

<template>
   <my-index :key="key"/>
</template>
 
<script>
   export default{
       data(){
          return {
                key:0
            }
       },
       watch:{
             key(){ 
                ++this.key
            }
       }
}
</script>

方案二：v-if 

原理：使用watch监听数据的变化，发生改变后，先销毁当前组件，再重新渲染

<template>
   
   <my-index v-if="reFresh"/>
</template>
 
<script>
   export default{
       data(){
          return {
                reFresh:true,
                changeValue:''
            }
       },
       watch:{
             changeValue(){
 
                  this.reFresh= false
                  this.$nextTick(()=>{
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

方案三：v-show 

v-show 是一开始就渲染的所有组件 , 之后只是样式的显示与隐藏

和v-if 比较的差别是 v-if 切换一次就需要重新渲染一次组件  

<template>
   
   <my-index v-show="isShow"/>
</template>
 
<script>
   export default{
       data(){
          return {
                isShow:true,
                changeValue:''
            }
       },
       watch:{
             changeValue(){
 
                  this.isShow= false
                  this.$nextTick(()=>{
                    
                    this.isShow = true
                })
            }
       }
}
</script>