Vue 等待异步完成再渲染组件|极客教程

Vue 等待异步完成再渲染组件

在开发 Vue 应用时，我们经常会遇到需要等待异步操作完成后再渲染组件的情况。这种情况可能出现在需要从后端获取数据后再展示页面内容，或者需要等待用户输入后再进行下一步渲染操作。在这篇文章中，我们将详细讨论如何在 Vue 中等待异步操作完成后再渲染组件。

使用 v-if 指令进行条件渲染

Vue 提供了 v-if 指令来根据表达式的值决定是否渲染元素。我们可以利用这一特性来等待异步操作完成后再渲染组件。具体步骤如下：

在组件的 data 中定义一个变量用来表示异步操作是否完成，例如 isLoading。
在需要等待异步操作的地方使用 v-if 指令根据 isLoading 的值来控制是否渲染组件。

下面是一个简单的示例代码：

<template>
  <div v-if="!isLoading">
    <!-- 等待异步操作完成后渲染的内容 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true, // 默认为 true，表示异步操作未完成
      message: ''
    }
  },
  created() {
    // 模拟异步操作
    setTimeout(() => {
      this.isLoading = false; // 异步操作完成后将 isLoading 设置为 false
      this.message = 'Hello, Vue!';
    }, 2000);
  }
}
</script>

在上面的代码中，当 isLoading 的值为 true 时，页面不会渲染 <div> 中的内容，直到异步操作完成后将 isLoading 设置为 false，此时页面会渲染 <div> 中的内容。

使用 v-show 指令进行条件显示

除了使用 v-if 指令进行条件渲染外，我们还可以使用 v-show 指令来条件显示元素。不同之处在于，v-show 会始终渲染元素，只是根据表达式的值来控制其显示或隐藏。与 v-if 相比，v-show 更适用于需要频繁切换显示状态的情况。

下面是一个使用 v-show 的示例代码：

<template>
  <div v-show="!isLoading">
    <!-- 等待异步操作完成后显示的内容 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      message: ''
    }
  },
  created() {
    setTimeout(() => {
      this.isLoading = false;
      this.message = 'Hello, Vue!';
    }, 2000);
  }
}
</script>

在这个示例中，<div> 中的内容始终会被渲染，但根据 isLoading 的值来决定是否显示。

使用计算属性进行条件渲染

另一种常见的做法是使用计算属性来控制组件的渲染。计算属性可以根据响应式数据进行计算并返回一个新值，我们可以利用这一特性来等待异步操作完成后再渲染组件。

下面是一个使用计算属性的示例代码：

<template>
  <div>
    <p v-if="!isLoading">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      message: ''
    }
  },
  computed: {
    shouldShowMessage() {
      return !this.isLoading;
    }
  },
  created() {
    setTimeout(() => {
      this.isLoading = false;
      this.message = 'Hello, Vue!';
    }, 2000);
  }
}
</script>

在上面的代码中，我们定义了名为 shouldShowMessage 的计算属性来表示异步操作是否完成。根据 shouldShowMessage 的值来决定是否渲染 <p> 元素。

使用`v-cloak`指令防止闪烁

在等待异步操作完成后再渲染组件时，有时候会出现页面内容短暂的闪烁现象。这是因为在数据获取到之前，页面已经开始渲染，而我们希望组件在数据加载完毕后再显示。为了避免这种闪烁，可以使用 Vue 提供的 v-cloak 指令。

v-cloak 指令用于防止页面加载时未编译的 Mustache 标签闪烁的现象。可以用样式对其进行隐藏，当 Vue 实例挂载到元素上后，v-cloak 指令会被移除，从而显示元素内容。

下面是一个使用 v-cloak 的示例代码：

<style>
  [v-cloak] {
    display: none;
  }
</style>

<template>
  <div v-cloak>
    <p>{{ message }}</p>
  </div>
</template>

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

在上面的代码中，[v-cloak] 的样式设置为 display: none;，当 Vue 实例挂载到元素上后，v-cloak 指令会被移除，显示元素内容。