vue中如何不刷新页面让组件重新渲染？

v-if(可以重置生命周期)

<template>
   <third-comp v-if="reFresh"/>
</template>
<script>
   export default{
       data(){
          return {
                reFresh:true,
                menuTree:[]
            }
       },
       watch:{
             menuTree(){
                  this.reFresh= false
                  this.$nextTick(()=>{
                    this.reFresh = true
                })
            }
       }
}
</script>

:key="key"此处可触发watch和update

vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。

<template>
  <div>
    <span :key="key"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        key: 0
      }
    },
    methods: {
      handleUpdateClick() {
        this.key += 1 
      }
    }
  }
</script>

this.$forceUpdate

组件内置$forceUpdate方法 , 强制手动刷新组件

export default {
  methods: {
    handleUpdateClick() {
      this.$forceUpdate()
    }
  }
}