啊啊啊，Vue.js一个困扰了我四天的BUG，关于table、popover和v-if、v-show的BUG。

问题描述

      <el-table-column prop="deviceId" label="房间设备" width="75px">
        <template slot-scope="scope" >
          <el-popover
            :ref="scope.row.id+'1'"
            placement="top"
            title="设备信息"
            width="260"
            trigger="hover"
          >
            <div>
              <div>
                <span >设&nbsp;&nbsp;备&nbsp;&nbsp;ID：</span>
                <span>{{ deviceDetail.imei }}</span>
              </div>
              <div>
                <span >设备名称：</span>
                <span>{{ deviceDetail.deviceName }}</span>
              </div>
              <div>
                <span>设备类型：</span>
                <span>{{ deviceDetail.deviceType }}</span>
              </div>
              <div>
                <span>设备型号：</span>
                <span>{{ deviceDetail.deviceNumber }}</span>
              </div>
              <div>
                <span>设备状态：</span>
                <span v-if="deviceDetail.deviceStatus === '00'">在线</span>
                <span v-if="deviceDetail.deviceStatus === '01'">离线</span>
                <span v-if="deviceDetail.deviceStatus === '02'">故障</span>
              </div>
            </div>
            <buttonv-if="scope.row.deviceId!==-1 && scope.row.deviceId !== null" slot="reference" style="color: #409EFF" type="success" size="mini" @mouseover="getDevDetail(scope.row)">设备详情</button>
          </el-popover>
        </template>
      </el-table-column>

//分页组件
    <el-pagination
      :total="total"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>

• 问题描述：这里是采用了Vue的分页组件的，实现的是再table里面采用popover，想要实现的功能是鼠标放在按钮上，显示设备详细信息，移开鼠标，信息消失，这里采用了v-if来判定该信息是否绑定了相应的设备，绑定的显示按钮，没绑定就不显示。
• Bug的形式：第一页显示信息完好，第二页的上面几个按钮不会进行信息显示。
• 修改的方法：将判断显示从v-if改为v-show，BUG解决，很神奇，不知道为啥，因此在网上查询到如下信息：

v-if和v-show的区别

1.手段：

v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

2.编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

3.编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

4.性能消耗：

v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

使用场景

• 基于以上区别，因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
  总结
• v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

总结

可能是v-if的惰性问题，只有在条件第一次变为真时才开始局部编译，编译被缓存或者编译被缓存后，然后再切换的时候进行局部卸载，而v-show在任何条件下都被编译，然后被缓存，而且DOM元素保留。