面试题：如何解决 Vue 初始化页面闪动的问题？

在 Vue 应用中，页面初始化时可能会出现闪动问题（即页面内容在 Vue 实例挂载前短暂显示未经处理的模板内容）。

这种问题通常是由于 Vue 实例还未完成渲染时，浏览器已经解析并显示了原始的 HTML 模板。

以下是解决 Vue 初始化页面闪动问题的几种方法：

1. 使用 `v-cloak` 指令

v-cloak 是 Vue 提供的一个指令，用于在 Vue 实例完成编译前隐藏未处理的模板内容。

实现步骤：

在 CSS 中定义 v-cloak 样式，隐藏带有 v-cloak 属性的元素。
在需要隐藏的元素上添加 v-cloak 属性。

示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    {{ message }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!',
      },
    });
  </script>
</body>
</html>

说明：

v-cloak 会在 Vue 实例完成编译后自动移除，元素会正常显示。

2. 使用 `v-text` 或 `v-html`

通过 v-text 或 v-html 绑定数据，避免在 Vue 实例挂载前显示模板语法。

示例：

<div id="app">
  <p v-text="message"></p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!',
    },
  });
</script>

说明：

v-text 和 v-html 会直接替换元素的内容，不会显示模板语法。

3. 将模板放在 `<script>` 标签中

将模板内容放在 <script type="x-template"> 或 <template> 标签中，避免浏览器直接解析模板。

示例：

<div id="app">
  <script type="x-template" id="app-template">
    <p>{{ message }}</p>
  </script>
</div>

<script>
  new Vue({
    el: '#app',
    template: '#app-template',
    data: {
      message: 'Hello, Vue!',
    },
  });
</script>

说明：

浏览器不会解析 <script type="x-template"> 或 <template> 标签中的内容，因此不会显示模板语法。

4. 使用 `mounted` 钩子显示内容

在 Vue 实例挂载完成后再显示内容。

示例：

<div id="app" style="display: none;">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!',
    },
    mounted() {
      document.getElementById('app').style.display = 'block';
    },
  });
</script>

说明：

在 mounted 钩子中显示内容，确保 Vue 实例已经完成挂载。

5. 使用服务端渲染（SSR）

服务端渲染（SSR）可以在服务端生成完整的 HTML 页面，避免页面闪动问题。

示例（使用 Nuxt.js）：

// pages/index.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>

说明：

SSR 会在服务端生成 HTML，浏览器直接显示渲染后的内容，不会出现闪动问题。

6. 使用骨架屏（Skeleton Screen）

在页面加载时显示骨架屏，提升用户体验。

示例：

<div id="app">
  <div v-if="loading" class="skeleton">
    <!-- 骨架屏内容 -->
  </div>
  <div v-else>
    {{ message }}
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!',
      loading: true,
    },
    mounted() {
      setTimeout(() => {
        this.loading = false;
      }, 1000); // 模拟加载延迟
    },
  });
</script>

<style>
  .skeleton {
    /* 骨架屏样式 */
  }
</style>