问题描述

起因是我先用v-if和v-else完成图片加载前的骨架功能（在图片加载完成前会先显示骨架组件),代码截取如下：

<ul v-if="goods.length" class="goods-list">
      .....
</ul>
<!-- 骨架屏组件 -->
<HomeSkeleton v-else bg="#f0f9f4"  />

以上代码的功能正常，直到我给外层添加了Vue的<Transition>过渡标签，本意是想让二者切换更为平滑，不曾想骨架功能直接失效，甚至连图片加载前占位的白屏区域都不见了，但在图片加载完成后会正常显示。根据页面效果可以推断在v-if生效前以上整段代码都被吞掉。

原因分析：

经过了一些了排查，最后发现原因竟是因为v-else上方的注释！当我把<!-- 骨架屏组件 -->删除时，功能可以恢复到添加标签之前的状态，但是过渡效果依然无效。

<Transition name="fade">
   <ul v-if="goods.length" class="goods-list">
          .....
   </ul>
   <HomeSkeleton v-else bg="#f0f9f4"  />
</Transition>

又是一系列的排查，最后发现把自定义的<HomeSkeleton>组件中的注释删除后，过渡效果便可生效。

// HomeSkeleton.vue
<template>
  <!-- 骨架屏 -->  删除此处
  	<div class="home-skeleton">
    ......
    </div>
  </div>
</template>

我发现只有在v-else控制的组件的上方和该组件内部的<template>正下方写注释时过渡才会失效，原因应该是注释节点会影响虚拟dom的编译。

总结：

在使用Vue3.0的<Transition>标签配合v-if和v-else时，v-else控制的组件上方和该组件内部<template>下方不允许写注释，否则会影响虚拟dom的编译，造成意想不到的bug，其他位置无影响。

vue2没有测，不知道官方未来是否会修复，又是愉快的踩坑的一天！