wordpress基础主题站,ui素材,wordpress网站统计插件,国外网站页头设计图片看到这篇文章算你运气好#xff01;因为只有我才能给你答案#xff01;看到就赚到#xff0c;这就是缘分
因为vue3迁移nuxt3是一个非常困难和痛苦的过程#xff0c;中间会有各种报错#xff0c;各种不兼容#xff0c;各种乱七八糟但是你又找不到答案的问题。
而且你一定…看到这篇文章算你运气好因为只有我才能给你答案看到就赚到这就是缘分
因为vue3迁移nuxt3是一个非常困难和痛苦的过程中间会有各种报错各种不兼容各种乱七八糟但是你又找不到答案的问题。
而且你一定会遇到这个onMounted不执行的问题
现象如下 上面可以看到无论浏览器console还是cmd命令行的输出都没有执行onMounted中的语句。
onMounted不执行是一个非常严重的问题这意味着你的异步请求都没法在页面挂载之前成功发起那么html就会因为没有ajax数据而没法渲染 我在nuxt3的github提过一个问怎么解决这个issue的问题并且提供了复现问题的链接结果nuxt3的开源作者说他们不看实际项目中的这种复现他们只看最小环境中是否存在这种问题让我在最小环境复现这个问题。如果最小环境中没有问题就不是框架的问题。
虽然他们说的有点道理但我还是忍不住要喷他们谁会只在最小环境开发就是因为真实环境中的各种因素的互相影响才能考验框架的健壮性用最小环境来复现问题做评判显示是片面和缺乏说法力的这是一种偷懒行为 要是都用最小环境来复现还要他们这些人开发个毛的框架直接说evething is okno any bug就得了。
这是扯了句题外话我经过了大概一天的测试和思考一直没有找到原因。
开始吐槽nuxt的垃圾和难用但是内心的不服输仍然推动着我必须解决这个问题
在今天早上出去锻炼吸收了天地灵气之后回到家里头脑一片清净在某个灵感涌现的瞬间找到了一点线索这本是不起眼的一个地方 import { Player, VHeader, VTab } from /components; export default defineComponent({ name: App, components: { VHeader, VTab, Player, }, 在app.vue里我手动导入了component组件当然这是一个非常正常的操作我是vue3迁移到nuxt3, nuxt3不是号称强大兼容性吗我如果要改大量代码才能迁移那我还用个屁的nuxt3啊
但是灵感为什么是灵感 那是因为你第一直觉在告诉你正确的方向在哪里
因为找问题的本质是 找到跟正常对象相比较所不同的地方
因为这种不同的地方往往不起眼微不可察但是就是往往这一点点差异造成了问题
果然我此时的直觉告诉我把这个手动引入组件去掉试试
然后去掉手动引入组件以后onMounted钩子终于执行了 换句话说 正是因为手动引入组件导致了vue3生命周期钩子onMounted不执行!
事实上不仅是onMounted不执行而是vue3所有的生命周期钩子都不能执行
为什么会这样我突然想起nuxt3设计时就是不需要开发者手动导入组件的直接使用组件名就可以用了。
但是没有想到如果手动引入组件会产生如此严重的后果
那我只能说nuxt3框架的兼容性真的太垃圾了作为vue3迁移nuxt3, 大家都只想尽量少改代码谁会想到要修改组件引入方式。而且nuxt3的规矩太多了跟vue3根本就是两样东西新的条条框框一大堆写的又不清楚你很难知道所有规则要不是为了ssr服务端渲染鬼才用nuxt3!
好了我写完了你应该感谢你有运气看到这篇文章否则你可能这辈子都解决不了这个问题。
