[转]vue重新渲染组件（重置或者更新） - 泥土里的绽放 - 博客园

方案一：v-if（可以重置生命周期）

当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 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=‘’（此处可触发watch和update）

通过vue key 实现，原理请查看官方文档。所以当key 值变更时，会自动的重新渲染。

<template>   <third-comp :key="menuKey"/></template> <script>   export default{       data(){          return {                menuKey:1            }       },       watch:{             menuTree(){                ++this.menuKey            }       }}</script> 

方案三：this.$forceUpdate

这个方法可以使当前组件调用这个方法时，重新渲染组件。

 

---------------------
作者：泥土里的绽放
来源：CNBLOGS
原文：https://www.cnblogs.com/cjjjj/p/12405901.html
版权声明：本文为作者原创文章，转载请附上博文链接！