如何延迟Vue.js组件加载直至libsodium.js异步加载完成？

我之前也处理过类似的异步依赖全局使用的场景，给你几个实用的实现方案，适配不同的需求：

方案一：全局初始化完成后再挂载Vue（最推荐） #

既然几乎所有组件都依赖libsodium，最稳妥的方式是在**应用入口文件（比如main.js）**里先完成libsodium的加载初始化，再创建并挂载Vue实例。这样整个应用启动时就已经能拿到可用的sodium实例，不需要在每个组件里处理等待逻辑。

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import sodium from 'libsodium-wrappers'

// 先初始化libsodium
async function initApp() {
  await sodium.ready;
  // 将sodium挂载到Vue原型上，所有组件都能通过this.$sodium访问
  Vue.prototype.$sodium = sodium;
  
  // 现在初始化Vue应用
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')
}

initApp()

这样所有组件里直接用this.$sodium就能调用libsodium的API，完全不需要处理异步等待的问题。

方案二：根组件管理sodium状态，控制子组件渲染 #

如果不想阻塞整个应用的初始化（比如想先显示加载骨架屏），可以在根组件里处理libsodium的加载，通过状态控制子组件的渲染时机：

// App.vue（根组件）
export default {
  data() {
    return {
      sodiumReady: false,
      sodium: null
    }
  },
  async created() {
    const sodium = require('libsodium-wrappers')
    await sodium.ready
    this.sodium = sodium
    this.sodiumReady = true
    // 也可以挂载到原型，方便子组件直接访问
    this.$root.$sodium = sodium
  },
  template: `
    <div id="app">
      <div v-if="!sodiumReady">加载中...</div>
      <router-view v-else /> <!-- 或者你的子组件容器 -->
    </div>
  `
}

子组件里就可以直接通过this.$sodium或者this.$root.$sodium使用，而且因为router-view是在sodiumReady为true时才渲染，子组件渲染时sodium已经完全可用了。

方案三：异步组件工厂函数（适合部分组件依赖的场景） #

如果只是部分组件依赖libsodium，可以用Vue的异步组件特性，在组件加载前确保sodium就绪：

// 在路由配置或者组件注册时使用
const MyComponent = () => {
  return new Promise(async (resolve) => {
    const sodium = require('libsodium-wrappers')
    await sodium.ready
    // 将sodium注入组件的props或者挂载到全局
    Vue.prototype.$sodium = sodium
    resolve(import('./MyComponent.vue'))
  })
}

// 然后在路由或组件中注册这个异步组件

额外提示 #

• 尽量避免在每个组件里单独初始化libsodium，会造成重复加载和性能浪费
• 如果用Vue 3的话，逻辑类似，只是挂载方式改成app.config.globalProperties.$sodium = sodium

内容的提问来源于stack exchange，提问作者Basaa