vue怎么实现异步渲染

Vue 实现异步渲染的方法

Vue 提供了多种方式处理异步渲染，以下是常见实现方法：

使用 v-if 和异步数据 通过条件渲染控制组件显示时机，等待数据加载完成后再渲染：

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else>{{ asyncData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      asyncData: null
    }
  },
  async created() {
    this.asyncData = await fetchData();
    this.loading = false;
  }
}
</script>

使用 Suspense 组件（Vue 3） Vue 3 的 Suspense 组件专门处理异步依赖：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
const AsyncComponent = defineAsyncComponent(() => 
  import('./AsyncComponent.vue')
);
</script>

结合 async/await 和生命周期钩子 在生命周期中处理异步操作：

export default {
  async mounted() {
    try {
      this.data = await axios.get('/api/data');
    } catch (error) {
      console.error(error);
    }
  }
}

使用 watch 监听异步数据变化 当异步数据更新时自动触发重新渲染：

export default {
  data() {
    return {
      userId: 1,
      userData: null
    }
  },
  watch: {
    userId: {
      immediate: true,
      async handler(newVal) {
        this.userData = await fetchUser(newVal);
      }
    }
  }
}

优化异步渲染性能

使用骨架屏 在数据加载前显示占位内容：

<template>
  <div v-if="!data">
    <div class="skeleton"></div>
  </div>
  <div v-else>
    <!-- 实际内容 -->
  </div>
</template>

代码分割与懒加载 结合路由实现组件级异步加载：

const routes = [
  {
    path: '/async',
    component: () => import('./AsyncPage.vue')
  }
]

错误处理 为异步操作添加错误处理逻辑：

async fetchData() {
  try {
    this.data = await api.getData();
  } catch (err) {
    this.error = err.message;
  } finally {
    this.loading = false;
  }
}

这些方法可以根据具体场景组合使用，Vue 的响应式系统会自动处理数据更新后的重新渲染。对于复杂场景，可以考虑使用状态管理工具（如 Pinia/Vuex）集中管理异步状态。