vue的v-if和v-show需要注意的问题
.el-tabs{text-align:left;}文章不易,请大家关注公众号毛毛虫的小蜡笔,多多支持,谢谢。前言大家应该知道v-if和v-show的区别。v-if是条件渲染。当条件为真时,它被渲染到dom节点中。当条件为假时,不会渲染到dom节点中。v-show,不管条件是否为真,都会渲染到dom节点上,只需切换css的显示显示或隐藏即可。场景及需要注意的问题场景一如果只是简单的tab切换,每个tab组件的内容不多,用v-show比较合适。但是需要注意的问题是,页面加载完成后,会触发mounted的tab组件,mounted会按照组件的先后顺序触发。演示代码://tab.vue.el-tabs{text-align:left;}//tab1.vue{{value}}
模板><脚本>导出默认值{数据:()=>{返回{value:'Contentoftab1...'}},mounted(){console.log('tab1')}}//tab2.vue
{{value}} 效果如下图所示:如果把上面的v-show改成v-if呢?相信大家都能知道,tab2的组件不会被加载,也不会渲染到dom,更不会触发mounted。效果如下截图所示:场景2如果有这样的需求:组件挂载时,需要发送初始化请求,比如获取组件的基础数据(基本不会变化的数据)。那么这种场景更适合v-show,不适合v-if。否则,每次切换标签时,都会发送获取基础数据的请求。但是如果两个组件使用同一个mixin,如果mixin中有一个共同的函数怎么办?详情请查看:毛毛虫的小蜡笔