原文：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.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的时候，也是没有问题。
如下截图所示：

最初

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

有疑难和问题，请留言。

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