原文：https://mp.weixin.qq.com/s?__...
微信公众号：毛毛虫的小小蜡笔

前言

应该大家都晓得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<template>  <el-tabs v-model="activeName">    <el-tab-pane label="tab1" name="first">      <tab1 v-show="activeName==='first'"></tab1>    </el-tab-pane>    <el-tab-pane label="tab2" name="second">      <tab2 v-show="activeName==='second'"></tab2>    </el-tab-pane>  </el-tabs></template><script>import tab1 from '../components/tab1.vue'import tab2 from '../components/tab2.vue'export default {  components: { tab1, tab2 },  data: () => {    return {      activeName: 'first'    }  },  mounted() {    console.log('tab')  }}</script><style lang="less" scoped>.el-tabs {  text-align: left;}</style>// tab1.vue<template>  <div class="tab1">      {{value}}  </div></template><script>export default {  data: () => {    return {      value: 'tab1的内容...'    }  },  mounted() {    console.log('tab1')  }}</script>// tab2.vue<template>  <div class="tab2">      {{value}}  </div></template><script>export default {  data: () => {    return {      value: 'tab2的内容...'    }  },  mounted() {    console.log('tab2')  }}</script>

成果下图所示：

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

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

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

场景2

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

那这种场景就比拟适宜v-show，不太适宜v-if。
不然每次切换tab，都会发申请获取根底数据。

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

代码次要改变点：
组件tab2会有个本人的函数，在mixin中会判断下，如果以后激活的tab是第二个，则调用tab2的函数，并返回处理结果。

具体代码如下所示：

// tab.vue<template>  <el-tabs v-model="activeName">    <el-tab-pane label="tab1" name="first">      <tab1 v-show="activeName==='first'" :activeName="activeName"></tab1>    </el-tab-pane>    <el-tab-pane label="tab2" name="second">      <tab2 v-show="activeName==='second'" :activeName="activeName"></tab2>    </el-tab-pane>  </el-tabs></template><script>import tab1 from '../components/tab1.vue'import tab2 from '../components/tab2.vue'export default {  components: { tab1, tab2 },  data: () => {    return {      activeName: 'first'    }  },  mounted() {    console.log('tab')  }}</script><style lang="less" scoped>.el-tabs {  text-align: left;}</style>// tab1.vue<template>  <div class="tab1">      {{value}} <br/>{{getNum()}}  </div></template><script>import mixin from './mixin.js'export default {  mixins: [mixin],  props: ['activeName'],  data: () => {    return {      value: 'tab1的内容...'    }  },  mounted() {    console.log('tab1')  }}</script>// tab2.vue<template>  <div class="tab2">      {{value}} <br/>{{getNum()}}  </div></template><script>import mixin from './mixin.js'export default {  mixins: [mixin],  props: ['activeName'],  data: () => {    return {      value: 'tab2的内容...'    }  },  mounted() {    console.log('tab2')  },  methods: {    getTab2Num() {      return 'tab2num is '+ Math.random()    }  }}</script>// mixin.jsexport 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的时候，也是没有问题。
如下截图所示：

最初

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

有疑难和问题，请留言。

如果感觉文章还能够，请点赞或珍藏，谢谢。