微信公众号：毛毛虫的小小蜡笔

前言

应该大家都知道v-if和v-show的区别。

v-if，是有条件的渲染，当条件是true的时候，才渲染到dom节点中。当条件是false的时候，是不会渲染到dom节点中。
v-show，则不管条件是否为true，都会渲染到dom节点中，只是切换css的display来显示或隐藏而已。

场景和需要注意的问题

场景1

如果只是简单的tab切换，并且每个tab组件的内容不多，那相对使用v-show会更合适。
但需要注意的问题是，页面加载后，都会触发tab组件的mounted，并且会根据组件顺序来触发mounted。

Demo

代码：

// tab.vue






// tab1.vue




// tab2.vue

效果下图所示：

如果把上面的v-show改为v-if呢？

相信大家都能知道，tab2的组件是不会加载，也不会渲染到dom的，也就不会触发mounted了。
效果如下截图所示：

而且每次切换tab，都会触发组件的mounted。
效果如下截图所示：

场景2

如果有这样的需求：
当组件mounted的时候，需要发个初始化请求，比如获取组件的基础数据（基本不会变动的数据）。

那这种场景就比较适合v-show，不太适合v-if。
不然每次切换tab，都会发请求获取基础数据。

但如果两个组件用同一个mixin，mixin中有个公用的函数呢？

代码主要改动点：
组件tab2会有个自己的函数，在mixin中会判断下，如果当前激活的tab是第二个，则调用tab2的函数，并返回处理结果。

具体代码如下所示：

// tab.vue






// tab1.vue




// tab2.vue




// mixin.js
export default {
  methods: {
    getNum() {
      console.log('getNum')
      let result = 'tab1num is '+ Math.random()
      if (this.activeName === 'second') {
        result = this.getTab2Num()
      }
      return result
    }
  }
}

此时用了v-show，而不是v-if，就会有问题。

默认渲染tab1的时候，不会报错。
如下截图所示：

当点击tab2的时候，就报错了。
如下截图所示：

但把v-show换成v-if，就没问题了。

默认渲染tab1的时候，不会报错。
如下截图所示：

当点击tab2的时候，也是没有问题。
如下截图所示：

最后

• 公众号《毛毛虫的小小蜡笔》

有疑问和问题，请留言。

如果觉得文章还可以，请点赞或收藏，谢谢。