解决nuxt3中vue3生命周期钩子onMounted不执行的问题

看到这篇文章算你运气好!因为只有我才能给你答案!看到就赚到,这就是缘分

因为vue3迁移nuxt3是一个非常困难和痛苦的过程,中间会有各种报错,各种不兼容,各种乱七八糟但是你又找不到答案的问题。

而且你一定会遇到这个onMounted不执行的问题!

现象如下:

上面可以看到无论浏览器console还是cmd命令行的输出都没有执行onMounted中的语句。

onMounted不执行是一个非常严重的问题,这意味着,你的异步请求都没法在页面挂载之前成功发起那么html就会因为没有ajax数据而没法渲染

我在nuxt3的github提过一个问怎么解决这个issue的问题,并且提供了复现问题的链接,结果nuxt3的开源作者说:他们不看实际项目中的这种复现,他们只看最小环境中是否存在这种问题,让我在最小环境复现这个问题。如果最小环境中没有问题,就不是框架的问题。

虽然他们说的有点道理,但我还是忍不住要喷他们:谁会只在最小环境开发?!就是因为真实环境中的各种因素的互相影响,才能考验框架的健壮性!用最小环境来复现问题做评判,显示是片面和缺乏说法力的,这是一种偷懒行为! 要是都用最小环境来复现,还要他们这些人开发个毛的框架,直接说evething is ok,no 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!

好了,我写完了,你应该感谢你有运气看到这篇文章,否则你可能这辈子都解决不了这个问题。

相关推荐
我就是DaLing呀!8 小时前
vue3 + 独立的数据管理 Store实现视频剪辑功能
前端·typescript·vue3·canvas·store
我才是银古3 天前
当 360° 全景遇上真实地图:Vue 3 实现全景-地图双向联动的工程实践
3d·vue3·360影像
XLYcmy4 天前
HTML/CSS/JS 基础与 Vue 技术栈深度解析
java·前端·css·html·vue3·vue2·api
码视野7 天前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
码视野7 天前
基于 Spring Boot + Vue3 的【高校化学实验室安全准入考试与危化品配伍排查系统】设计与实现(含PRD/三端高保真源码/大屏)
前端·人工智能·spring boot·后端·安全·vue3
fxshy7 天前
WebGIS 游戏化实践:基于 Cesium + Vue3 实现全球飞行模拟系统:从球体坐标、飞行动力学到地形碰撞实战
游戏·vue3·cesium·webgis·飞行模拟
jonyleek8 天前
技术实践:基于 Vue3 + Spring Cloud 微服务实现私有化文档系统的类 SaaS 协同体验
微服务·私有化部署·vue3·springcloud·协同编辑·jvs企业文档·无忧企业文档
码视野8 天前
基于 Vue3 + Element Plus 的【智慧社区洗车养车与上门流动洗车预约调度系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野8 天前
基于 Vue3 + Element Plus 的【无人值守共享自习室与空间智能预约系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野8 天前
基于 Vue3 + Element Plus 的【基于 Vue3 的智慧健身房会员管理与私教团课预约核销系统】设计与实现(附完整源码与PRD)
前端·vue3