条件渲染

v-if

真正的条件渲染，只会渲染符合条件的那个
会重新渲染和销毁组件（重新执行渲染和销毁生命周期函数）
应用场景：用于切换不频繁，在一开始就基本决定了那个显示的

vue

<template>
  <div>
    <p v-if="type === 'a'">A</p>
    <p v-else-if="type === 'b'">B</p>
    <p v-else>C</p>
  </div>
</template>
<script>
data(){
	return{
           type: 'a'
       }
   }
</script>

最终显示

html

<p>A</p>

如何提高性能？

使用 keep-alive

功能：缓存组件
使用场景：频繁切换，但不需要重复渲染（例如：标签切换）

vue

<template>
  <div id="tab">
    <button @click="changeState('A')">A</button>
    <button @click="changeState('B')">B</button>
    <button @click="changeState('C')">C</button>

    <keep-alive>
      <!-- 缓存组件，切换也不会让Tab页重新执行渲染和销毁生命周期函数 -->
      <TabA v-if="state === 'A'" />
      <TabB v-if="state === 'B'" />
      <TabC v-if="state === 'C'" />
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state: "A",
    };
  },
  methods: {
    changeState(state) {
      this.state = state;
    },
  },
};
</script>

keep-alive 和 v-show 的不同点

keep-alive 是 vue 层级的改变，v-show 是 css 层级的改变
比较复杂的场景使用 keep-alive 性能更好，v-show 适合简单的场景

v-show

不管初始条件是什么，总是会渲染，只是是否加上 display:none
不会重新渲染和销毁组件（不会再次执行渲染和销毁生命周期函数）
应用场景：用于切换频繁的，相对于 v-if ，性能更好

vue

<template>
  <div>
    <p v-show="type === 'a'">A</p>
    <p v-show="type === 'b'">B</p>
  </div>
</template>
<script>
data(){
	return{
           type: 'a'
       }
   }
</script>

最终显示

html

<p>A</p>
<p style="display:none">B</p>

条件渲染 ​

v-if ​

v-show ​

条件渲染

v-if

v-show