Vue知识点一：v-show和v-if指令的共同点和不同点？

v-show和v-if指令的共同点和不同点？

1.共同点

用来控制DOM元素的显示或隐藏

2.区别

原理：

• v-show指令：通过控制css中的display设置为none，控制隐藏或显示；元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏。
• v-if指令：v-if是动态的向DOM树内添加或删除DOM元素；满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示。

形式：

• v-if ：可以有多种使用形式： 单路分支， 多路分支， 双路分支；
• v-show：只能写一个单路形式

3.应用场景：

• 如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)；
• 如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）。

4.v-shwo与v-if示例

<!--
 * @Description: v-shwo与v-if代码
 * @Author: HMM
 * @Date: 2021-01-21 19:49:56
-->
<template>
  <div class="test">
    <el-container>
      <el-header>
        <el-button type="primary" @click="setTabNum(1)">切换1</el-button>
        <el-button type="success" @click="setTabNum(2)">切换2</el-button>
        <el-button  @click="testRefs()">测试ref用法</el-button>
      </el-header>
      <el-main>
        <h1>v-show使用：</h1>
        <br />
        <div v-show="tabNum === 1" ref="tabShow1">show - 页面1</div>
        <div v-show="tabNum === 2" ref="tabShow2">show - 页面2</div>
        <br />
        <hr />
        <br />
        <h1>v-if使用：</h1>
        <br />
        <div v-if="tabNum === 1" ref="tabIf1">if - 页面1</div>
        <div v-if="tabNum === 2" ref="tabIf2">if - 页面2</div>
      </el-main>
    </el-container>
  </div>
</template>



<!-- JS -->
<script>
export default {
  data() {
    return {
      tabNum: 1
    };
  },
  methods: {
    /**
     * @description: 切换事件
     * @param {*} num Number类型
     * @return {*}
     */
    setTabNum(num) {
      this.tabNum = num;
    },
    /**
     * @description: 测试ref用法
     * @param {*}
     * @return {*}
     */
    testRefs(){
      console.log('v-show: 1', typeof this.$refs.tabShow1);
      console.log('v-show: 2', typeof this.$refs.tabShow2);
      console.log('v-if: 1', typeof this.$refs.tabIf1);
      console.log('v-if: 2', typeof this.$refs.tabIf2);
    }
  }
};
</script>

参考案例：
v-show和v-if指令
v-show和v-if指令
Vue 中指令 v-show/v-if (条件渲染)的对比与使用