Vue 骨架屏：80 行代码实现运行时加载

2023-11-21 11:22:28

在现代单页面应用 (SPA) 中，页面加载速度至关重要。骨架屏技术通过在内容加载之前显示占位符，可以有效提升用户体验，避免空白屏幕带来的枯燥感。本文将探讨如何在 Vue 中使用 80 行代码实现运行时骨架屏，并提供实际代码示例，帮助你快速掌握这项技术。

SEO 关键词：

作为前端开发者，用户体验一直是我们关注的重中之重。骨架屏技术的出现，为提升 SPA 中的加载速度提供了有效手段。它可以通过在内容加载之前显示占位符，避免空白屏幕带来的枯燥感，让用户在等待过程中也能获得良好的视觉反馈。

本文将介绍如何使用 Vue.js 在 80 行代码内实现运行时骨架屏。我们将分步讲解，并提供一个完整的代码示例，帮助你快速上手。

理解运行时骨架屏

运行时骨架屏是指在运行时动态创建骨架屏，而不是在编译时预先生成。这种方式的好处在于，它可以根据实际内容的大小和形状自适应调整骨架屏的尺寸和布局。

实施 Vue 运行时骨架屏

安装必要的依赖项：

npm install --save vue-shimmer

在 Vue 组件中导入 vue-shimmer：

import VueShimmer from 'vue-shimmer'

Vue.component('VueShimmer', VueShimmer)

在模板中使用 vue-shimmer 组件：

<template>
  <div>
    <vue-shimmer :visible="isLoading"></vue-shimmer>
    <div v-if="!isLoading">
      <!-- 实际内容 -->
    </div>
  </div>
</template>

在 data() 中设置 isLoading 为 true：

data() {
  return {
    isLoading: true,
  }
}

在 mounted() 生命周期钩子中，根据实际内容加载情况设置 isLoading 为 false：

mounted() {
  // ... 获取实际内容 ...
  this.isLoading = false
}

完整代码示例

<template>
  <div>
    <vue-shimmer :visible="isLoading"></vue-shimmer>
    <div v-if="!isLoading">
      <!-- 实际内容 -->
      <h1>标题</h1>
      <p>正文</p>
    </div>
  </div>
</template>

<script>
import VueShimmer from 'vue-shimmer'

export default {
  components: { VueShimmer },
  data() {
    return {
      isLoading: true,
    }
  },
  mounted() {
    // 模拟内容加载
    setTimeout(() => {
      this.isLoading = false
    }, 1000)
  }
}
</script>