如何避免Vue3应用挂载时引发的CLS问题？

以下是几种无需固定高度即可规避CLS的方案：

• 保持初始占位内容与渲染后内容高度匹配
  在挂载元素中预先放置与最终渲染内容结构、高度一致的静态占位（比如骨架屏、空文本块或模拟内容）。Vue挂载替换内容时，容器高度不会突变，从根源上避免布局偏移。例如若最终渲染列表，可提前放置相同数量、高度一致的空列表项，设置与实际列表项一致的padding和行高。

• 用Transition组件实现平滑高度过渡
  将初始占位内容与Vue渲染内容包裹在<Transition>组件中，通过CSS过渡效果让高度变化平滑进行，而非突然跳转（CLS算法对平滑过渡的偏移量权重较低）。示例代码：

  <template>
    <div id="app">
      <Transition name="content-transition">
        <div v-if="isAppMounted">
          <!-- Vue渲染的动态内容 -->
        </div>
        <div v-else>
          <!-- 初始静态占位内容 -->
        </div>
      </Transition>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  const isAppMounted = ref(false)
  onMounted(() => {
    isAppMounted.value = true
  })
  </script>
  
  <style>
  .content-transition-enter-active, .content-transition-leave-active {
    transition: max-height 0.3s ease, opacity 0.3s;
    overflow: hidden;
  }
  .content-transition-enter-from, .content-transition-leave-to {
    opacity: 0;
    max-height: 0;
  }
  </style>
  

  这里通过max-height控制高度的平滑变化，确保布局偏移被弱化。

• 采用SSR或SSG渲染模式
  使用Nuxt.js等支持服务端渲染（SSR）或静态站点生成（SSG）的框架，Vue会在服务器端生成完整的HTML内容并发送给浏览器，浏览器直接显示内容后再进行Vue激活（hydrate）过程，全程不会出现内容消失再重建的情况，彻底避免CLS。

• 基于v-cloak的显示时机优化
  利用v-cloak属性结合visibility CSS属性，保证挂载过程中容器的占位空间始终存在：

  <div id="app" v-cloak>
    <!-- 初始内容 -->
  </div>
  

  #app {
    visibility: visible;
  }
  #app[v-cloak] {
    visibility: hidden;
  }
  

  Vue挂载完成后会自动移除v-cloak属性，此过程中容器高度始终被保留，不会引发布局偏移。

内容的提问来源于stack exchange，提问作者Kyl