vue的v-if和v-show需要注意的问题

文章不易，请关注公众号 毛毛虫的小小蜡笔，多多支持，谢谢。

前言

应该大家都知道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中有个公用的函数呢？

详情 请查看：毛毛虫的小小蜡笔