vue怎么实现同步加载

Vue 实现同步加载的方法

在 Vue 中，同步加载通常指在组件渲染前确保数据已加载完成。以下是几种常见的实现方式：

使用 async/await 配合生命周期钩子

在组件的 created 或 mounted 钩子中使用 async/await 确保数据加载完成后再渲染：

export default {
  data() {
    return {
      dataList: []
    }
  },
  async created() {
    this.dataList = await this.fetchData()
  },
  methods: {
    fetchData() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([1, 2, 3])
        }, 1000)
      })
    }
  }
}

使用 v-if 控制渲染时机

通过 v-if 指令确保数据加载完成后再渲染模板：

<template>
  <div v-if="dataLoaded">
    <!-- 渲染内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataLoaded: false,
      dataList: []
    }
  },
  created() {
    this.fetchData().then(() => {
      this.dataLoaded = true
    })
  },
  methods: {
    fetchData() {
      return new Promise(resolve => {
        setTimeout(() => {
          this.dataList = [1, 2, 3]
          resolve()
        }, 1000)
      })
    }
  }
}
</script>

使用 Vue Router 的导航守卫

在路由跳转前完成数据加载：

const router = new VueRouter({
  routes: [...]
})

router.beforeEach(async (to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    await store.dispatch('fetchUserData')
  }
  next()
})

使用 Vuex 状态管理

通过 Vuex 的 actions 和 getters 实现同步数据加载：

// store.js
const store = new Vuex.Store({
  state: {
    dataList: []
  },
  mutations: {
    setData(state, payload) {
      state.dataList = payload
    }
  },
  actions: {
    async fetchData({ commit }) {
      const data = await api.getData()
      commit('setData', data)
    }
  }
})

// 组件中
export default {
  computed: {
    dataList() {
      return this.$store.state.dataList
    }
  },
  created() {
    this.$store.dispatch('fetchData')
  }
}

使用 Suspense（Vue 3）

Vue 3 的 Suspense 组件可以更好地处理异步依赖：

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

<script>
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})

export default {
  components: {
    AsyncComponent
  }
}
</script>

以上方法可以根据具体场景选择使用。对于简单的数据加载，async/await 和 v-if 是常用方案；对于复杂应用，Vuex 或 Vue Router 的导航守卫更适合。