程序员经验分享-hwhale

Vue：等待渲染，直到安装所有组件

2024-01-15

我有一个 Vue/Nuxt Web 应用程序，其中页面是从许多具有子组件的组件动态生成的。

问题是页眉和页脚首先渲染，然后是具有实际内容的子组件。第一次加载时这看起来很糟糕，而且 Lighthouse 不喜欢它。这是一个Avoid large layout shifts失败。对于上下文来说，这只是客户端渲染时的一个问题，SSR 会消除这个问题，同时引入其他问题。

我能做的就是编辑项目中的每个组件并在安装上添加一个事件。然后可以用它来决定何时显示布局。问题是这将是一个大麻烦，并且当添加新组件而忘记这一点时会导致错误。

我无法在 Vue 和/或 Nuxt 中找到任何通用的解决方案。我很想有一个新的终身钩子allMounted仅当子组件也已安装但它不存在时才会触发。即使那样也有点hacky。一个更一般的render when all components are mounted选择会很棒。


我不确定动态组件 https://v2.vuejs.org/v2/guide/components-dynamic-async.html可以帮助你的情况，但我想你的公司网站 https://www.credy.es/不会真正从中受益。事实上，在我看来，内容跳跃的问题仍然存在。

<component :is="currentTabComponent"></component>

我仍然认为您的内容在我看来是高度静态的，您甚至可以切换到全静态 https://nuxtjs.org/blog/going-full-static/获得最佳性能优势，而不必在 SPA 加载所有内容时等待很长时间 (TTFB)。当然，让一切看起来都很好（补水之前/之后）可能更具挑战性。

另外，您应该了解容器的大致尺寸。在这种情况下，你可以使用一些骷髅 https://buefy.org/documentation/skeleton/甚至可能是原型字体 http://danross.co/flow以视觉方式填充块。

如果您不同意或认为这不可行，您仍然可以这个解决方案 https://stackoverflow.com/a/55080141/8816585任你处置

<child-component @hook:mounted="makeSomeStuff"></child-component>

这样您就可以显示全尺寸的加载程序，直到您的内容加载完毕。你可以添加a mixin https://v2.vuejs.org/v2/guide/mixins.html与较长的mounted每个组件中的语法以避免过多的样板代码，但这一个已被弃用并且确实有各种问题 https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/.

但在我看来，问题更多在于你获取数据的方式（asyncData and fetch钩子很好）以及当没有特定需要时一切都是动态的。如果保留动态部分更重要，我想您可以认真进行代码审查或插入一些 git hook 或类似的内容来扫描代码并查看是否需要mounted发射到位。

对于您的情况，没有理想的解决方案，但请记住，Lighthouse 总是更喜欢一些 JS 量较少的 SSR 内容。这是我的个人圣经 https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/对于任何与性能相关的事情，您可能可以在这篇非常深入的文章中掌握一些不错的技巧。

Vue3 更新

Vue3 的语法已更改：https://v3-migration.vuejs.org/writing-changes/vnode-lifecycle-events.html#_2-x-syntax https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html#_2-x-syntax

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

nuxtjs

Vue：等待渲染，直到安装所有组件 的相关文章

  • vue.js：观察输入并未在每次按键时触发

    我有一个input正在监视其模型属性 问题是每次按键时不会调用 watch 方法铬 安卓设备 如果我点击输入文本 就会调用它 过去确实有效 但我不知道发生了什么 在Chrome 桌面版可以正常使用 那就是watch for text每次按键

  • 如何在 Vue.js 中排除文件（例如配置文件）？

    https cli vuejs org config configurewebpack https cli vuejs org config configurewebpack https cli vuejs org config chain

  • vuejs2复制剪贴板问题

    我正在尝试使用https alligator io vuejs vue clipboard copy https alligator io vuejs vue clipboard copy 对于 Vue js 中的复制剪贴板功能 它对于字符

  • Vuejs - 如何使用 v-for 获取数组中的所有唯一值（删除重复项）

    如何只显示一个按钮distinct date 我可以使用两个 v for 循环吗 如何选择distinct我的循环中的值 div div

  • 如何从 Laravel 将路由参数传递到 Vue.js

    我有这样的路线来获取带有相关评论的帖子 Route get api topics category id title function category id title return App Topic with comments gt

  • Apollo 客户端“未找到命名导出‘删除’”

    我正在尝试创建一个apollo client插件Nuxt 3应用 它当前抛出有关名为的包的错误ts invariant file Users my name Repositories project node modules apollo

  • 如何使用 Nuxt ServerMiddleware 和 Apollo GraphQL 处理 301 重定向

    我目前正在构建一个 Vue Nuxt 应用程序 并结合修改后的 Saleor 安装来在线销售产品 当我们从现有系统迁移时 我们需要能够处理从旧网站 URL 到新网站 URL 的 301 重定向 我修改了 API 以响应以下 GraphQL

  • Vuex存储数据总是驻留在内存中？

    首先 我希望您能理解我蹩脚的英语 我想知道Vuex的存储数据是否总是驻留在内存中 让我用一个例子来解释一下 当进入页面A时 我们从服务器收到一个列表 并实现将其存储在商店中 这是否意味着当我进入页面A并移动到页面B时 A的列表将保留在内存中

  • 当 Vuejs 中的 props 值发生变化时，DOM 不会更新

    我有父母和孩子 在父级中 我将 3 个变量作为 props 传递给子级 在孩子中我正在使用watch 寻找变量的变化 当孩子第一次被创建时watch按预期工作 但是当更新 props 中的数据时 子级的 DOM 不会更新 正在寻找变量数据变

  • FCM onMessage 无法在 Firefox 中工作，但可以在 chrome 中工作

    我的代码是工作完美在chrome上 版本103 0 5060 134 但是当我在firefox 103 0 上尝试时它不工作 Service Worker 注册成功 但无法接收通知 消息 控制台中没有显示错误 这是我的代码 顺便说一句 我正

  • 关闭 css 、 vue cli 3 webpack 4 的单独块

    我正在使用使用最新版本的 vue cli 3 创建的项目 我使用的是默认配置 我的路由器有很多动态导入的路由 我的 css 和 js 在生产环境中运行时都被分成多个块 虽然 js 的行为是可取的 我的 css 文件非常小 我想关闭 css

  • Vue 2 日期选择器组件

    我正在尝试使用 Bootstrap Datepicker 创建 Vue 2 组件 但在选择日期后尝试更新输入时遇到困难 这是我的代码 Vue component datepicker template

  • Vue-Router 抽象父路由

    我正在尝试将当前网站迁移到 vuejs 站点地图必须是 login signup password reset browse search dozens of other routes 由于其中一些路线共享大量 fx 因此我将它们设为父路线

  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴

  • 如何在 Laravel 5.4 中加载 Vue 组件？

    我已经运行 npm run watch 并收到了消息 This dependency was not found in resources assets js app js To install it you can run npm ins

  • 使用带有少量项目的 v-slide-group 时出现问题

    我在使用 v slide group 时遇到问题 有时我有 2 3 个项目 有时我有 10 个或更多项目 但项目较少时 它不会显示箭头 幻灯片项目也不居中 这是我的 HTML div div

  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问

  • 如果用户在 Laravel 中经过身份验证，如何检查 Vue 组件？

    正如标题所述 我有点困惑如何根据用户是否登录并使用 Laravel 的 Auth 外观进行身份验证 使用 if else 语句处理 Vue 组件中的方法 我正在发出各种 Axios 请求 我需要根据用户是否登录来允许 禁止这些请求 我有 V

  • 构建 Vue 微前端应用程序（带有路由和 vuex 存储）

    我需要帮助配置使用 Vuex Vue Router 和 Vue i18n 的微前端应用程序的构建 分发 TL DR 我在构建将导入到现有系统中的微前端应用程序时遇到问题 我们的团队尝试通过 vue cli service 和 vue web

  • 在 Angular 中使用 Vue 组件

    我有一个用 Vue 构建的项目 我想在 Angular 应用程序中重用 Vue 应用程序中的组件 这样我就不必从头开始重建每个组件 我在medium上看到了这个教程 如何在 Angular 应用程序中使用 Vue 2 0 组件 https

随机推荐

  • 在 C++ 中动态增长数组

    我有一个 CName 对象指针数组 我有以下构造函数 它将数组初始化为大小一 然后 当我添加一个对象时 我将数组增加 1 并添加新对象 它编译得很好 但是当我尝试打印它们时 我只是收到分段错误错误 你能帮我看看我有没有做错什么吗 const

  • 部署keycloak自定义spi部署

    我尝试在我的 keycloak 项目中创建一个自定义 spi 遵循基本的 keycloack 结构 我添加自定义提供程序接口 该接口扩展提供程序 自定义提供程序工厂并为它们实现自定义 spi 如 keycloak 文档所述 并且它们在源代码

  • 使用 C# 读取附加到 HTTP 扩展的 BLOB

    所以我使用第三方服务来编辑我的XML存储在服务器路径上的文件 现在 一旦我完成编辑XML 我将文件保存到本地内存存储 该存储生成附加到 URL 的 BLOB Example blob http localhost 0e06af7a a1a9

  • C++ 中“使用命名空间 ::X”中的前导 :: 是什么意思

    有人可以解释一下以下命名空间用法之间的区别 using namespace layer module and using namespace layer module 是什么原因导致额外的 before layer 如果在以下上下文中使用它

  • 如何将 WordPress 模板与 CodeIgniter 集成

    CodeIgniter 和 WordPress 如何集成 使得外观和感觉 模板 WordPress 博客是否会转移到 CodeIgniter 创建的页面 第一步是将 CodeIgniter 和 WordPress 文件移动到它们自己的目录中

  • fclose() 函数运行缓慢

    我尝试在 Linux 机器上使用 c fopen fwrite 和 fflush 和 fclose 函数创建大约 4 GB 的文件 但我观察到 fclose 函数需要很长时间才能关闭文件 大约需要 40 50 秒 我检查了不同的论坛以找到这

  • Sqlite3 的 Rails 测试失败

    当我在 Rails 中运行测试时 我似乎遇到了一个奇怪的错误 它们都因相同的原因而失败 并且没有一个在线文档对于这个特定的错误似乎特别有帮助 SQLite3 SQLException cannot rollback no transacti

  • 从 Kafka 获取最新值

    我有一个卡夫卡主题叫做A 主题中的数据格式A is id 1 name stackoverflow created at 2017 09 28 22 30 00 000 id 2 name confluent created at 2017

  • Control-C 和 C 中的信号处理

    我有 2 个进程通过套接字相互通信发送者和接收者 我想捕获信号 Control C 并且不退出 显示一些输出 发送者和接收者工作正常 所以我将信号 SIGINT 处理程序 添加到发送者的身体 handler 只是输出一些文本 所以当我运行它

  • Rails：没有复数的路由给出了奇怪的助手

    通过此设置 我得到了一个奇怪的命名助手 在 config routes rb 中我有 Qtl Application routes draw do resources qtl table do collection do get searc

  • 使用 Visual Studio 的 link.exe 的链接文件限制是多少？

    我知道一些链接器对命令行上允许的目标文件数量有限制 Visual Studio 是什么 此外 如果超过此数字 某些链接器允许您指定一个包含所有目标文件名称的文件 并且您只能将其作为参数传递 这是一个例子来向您展示我的意思 some link

  • 全文搜索仅返回精确匹配

    我有以下脚本 select c id from TBL COUPONS as c inner join TBL BUSINESS as b on c business id b business id inner join TBL BLOC

  • Android：API级别VS。安卓版本

    我是Android开发新手 我想知道版本和API级别之间有什么联系或区别 每一项指的是什么 当我决定为 API 14 或 Android 4 0 开发一些应用程序时 这意味着什么 或者一个是另一个的子集 我根本没明白其中的区别 为什么有两个

  • Android - EditText 与软键盘重叠

    我正在开发一个有一些 EditText 的 Activity 当我单击 触摸 EditText 时 会出现软键盘 但是屏幕底部的 EditText 与软键盘重叠 显示 EditText 的上半部分 下半部分位于键盘下方 我设置了androi

  • Julia Dataframes 与 Python pandas

    我目前正在使用 pythonpandas并想知道是否有办法将 pandas 中的数据输出到 Julia 中Dataframes反之亦然 我认为你可以从 Julia 调用 pythonPycall但我不确定它是否适用于数据帧 有没有办法从 p

  • javascript 获取子域上的 iframe url 当前页面

    我需要获取页面上 iframe 所在的页面 url 因为我们使用 iframe 来处理订购产品 然而 在我的一生中 我似乎无法让它显示 iframe 的 URL 显示是一个测试 因为当我看到它有效时它会自动发送电子邮件 代码

  • Magento：获取商店联系电话

    看起来应该很简单 但在任何地方都找不到解决方案 我需要输出商店联系电话号码 该号码位于管理员的商店信息中 我需要将其输出到模板文件和 CMS 页面中 每个文件的代码是什么 谢谢 那是一个核心配置 所以它被保存在core config dat

  • 多数据库 Grails 应用程序的 Spring 或 Hibernate 多租户

    Grails 有一个用于单个数据库的多租户插件和一个用于多数据库的多租户插件 但不再支持 维护用于多数据库的插件 有没有什么方法可以让我将 Spring 或 Hibernate 本身用于多租户多数据库 Grails 应用程序 您可以使用此处

  • 如何从 JavaScript 中隐藏时间标准

    我只想显示天 日期 时间 现在显示 其实我想显示如下 如何删除 印度标准时间 使用的代码如下

  • Vue：等待渲染，直到安装所有组件

    我有一个 Vue Nuxt Web 应用程序 其中页面是从许多具有子组件的组件动态生成的 问题是页眉和页脚首先渲染 然后是具有实际内容的子组件 第一次加载时这看起来很糟糕 而且 Lighthouse 不喜欢它 这是一个Avoid large

热门标签