vue占位怎么实现

Vue 占位实现方法

在 Vue 中实现占位效果可以通过多种方式完成，以下是常见的几种方法：

使用 v-if 和 v-else 控制显示 通过条件渲染切换占位符和实际内容，适用于数据加载时的占位场景。

<div v-if="loading">
  <div class="placeholder"></div>
</div>
<div v-else>
  {{ actualContent }}
</div>

CSS 伪元素实现 通过纯 CSS 创建视觉占位效果，适合静态或简单的动态占位。

.placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

第三方库（如 vue-content-loader） 使用专门为 Vue 设计的占位库，可快速实现复杂占位效果。

import { ContentLoader } from 'vue-content-loader'
export default {
  components: { ContentLoader }
}

<content-loader viewBox="0 0 400 160">
  <rect x="0" y="13" rx="4" ry="4" width="400" height="9" />
  <rect x="0" y="29" rx="4" ry="4" width="100" height="8" />
</content-loader>

骨架屏（Skeleton Screen） 结合路由守卫实现整页占位，提升用户体验。

// 路由配置中
router.beforeEach((to, from, next) => {
  store.commit('SET_LOADING', true)
  next()
})

动态组件占位 通过 <component> 和异步组件实现占位与内容切换。

const AsyncComponent = () => ({
  component: import('./Component.vue'),
  loading: LoadingComponent,
  error: ErrorComponent
})

实现注意事项

• 占位元素应尽量保持与实际内容相似的尺寸和布局，避免布局抖动
• 对于图片占位，可使用低质量图像占位符（LQIP）技术
• 动画效果应 subtle，避免过度干扰用户注意力
• 移动端需特别注意占位元素的性能影响

性能优化建议

• 使用 v-show 替代 v-if 当需要频繁切换时
• 对占位动画添加 will-change: transform 属性提升性能
• 复杂占位结构考虑使用 Virtual Scrolling 技术
• 通过 Intersection Observer API 实现懒加载占位