页面完全加载及依赖获取完成后，应使用哪个Nuxt Hook加载第三方JavaScript？

如果你需要在页面完全加载、所有suspense操作和依赖获取完成后执行代码，推荐使用以下两个钩子，可根据场景选择：

• page:finish：每次页面导航完成后触发，此时当前页面的所有异步数据获取、suspense组件的异步依赖都已处理完毕，页面内容完全渲染完成，非常适合在此时加载第三方JavaScript，确保不会干扰页面渲染流程。

  使用示例（在Nuxt插件中配置）：

  export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.hook('page:finish', () => {
      // 动态加载第三方JS示例
      const script = document.createElement('script')
      script.src = '你的第三方JS地址'
      script.async = true
      document.body.appendChild(script)
    })
  })
  

• app:mounted：仅在应用首次挂载完成后触发一次，适合全局只需要加载一次的第三方脚本。该钩子会在初始页面的所有suspense操作完成后触发，确保初始页面完全渲染。

  使用示例：

  export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.hook('app:mounted', () => {
      // 加载全局第三方JS示例
      const script = document.createElement('script')
      script.src = '你的第三方JS地址'
      script.async = true
      document.body.appendChild(script)
    })
  })
  

常规的window.load事件仅等待页面资源（如图片、样式表）加载完成，但Nuxt的suspense异步操作属于Vue组件渲染流程，可能在window.load触发后仍在执行，导致第三方脚本加载时机过早，无法满足你的需求。

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