v-if v-else-if v-else

Vue 的条件渲染和我们日常编程使用的 if 判断很相似，如下代码

  if(表达式){
      语句
  }else if(){
      语句
  }else{
      语句
  }

在使用 v-if``v-else-if``v-else 这三个的时候，结构上必须紧挨着。

var App = {
  data() {
    return {
      list: [],
      // loading —> 获取数据 —> 没有数据 —> no data
      // 有数据 —> 赋值list
      listStatus: 'noData',
    };
  },
  template: `
    <table border="1" width="300px" align="center">
        <thead>
            <tr>
                <th>ID</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody align="center" v-if="listStatus==='loading'">
            <tr>
                <td colspan="2">Loading....</td>
            </tr>
        </tbody>
        <tbody align="center" v-else-if="listStatus==='noData'">
            <tr>
                <td colspan="2">-No data-</td>
            </tr>
        </tbody>
        <tbody align="center" v-else>
            <tr v-for="item of list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </tbody>
    </table>
    `,
  mounted() {
    const random = Math.random();

    setTimeout(() => {
      if (random <= 0.5) {
        (this.list = [
          {
            id: 1,
            name: 'Mike',
          },
        ]),
          [
            {
              id: 2,
              name: 'Tom',
            },
          ];
        this.listStatus = 'show';
      } else {
        this.listStatus = 'noData';
      }
    }, 1000);
  },
};
Vue.createApp(App).mount('#app');

1. v-if是对DOM的移除和添加，在移除后用注释节点进行占位，因为v-if必须要保证当前被移除节点的节点位置，以确保之后恢复该节点在当前位置树上。
2. 开关过程中对内部的子组件与事件监听都会销毁与重建。
3. v-if="指令表达式"返回truthy就会渲染，这是一种惰性渲染

二、v-show

通过style控制display渲染none/block

三、两种条件如何选择？

1. v-if在切换的时候会提高开销，如果条件为假，初始化渲染是不会进行的。
2. v-show在切换的时候开销较低，但是初始化渲染时无论显示与否都要被渲染。

四、使用场景

1. 切换频繁用v-show
2. 切换少，操作不频繁，加载时不需要视图，可以用v-if