最近开始用Vue做网页项目，以为很简单，结果掉坑里了。刚上手就发现一堆问题，差点没崩溃。

第一件事，安装Vue脚手架。开了新项目，敲命令npm init vue，等了半天才装本以为一帆风顺，结果页面死活不显示数据。研究了半天，原来数据绑定时变量没初始化得用ref或reactive才行，不然改了也白搭。

组件通信搞死人

想传数据给子组件。试着用props传参，在代码里写:propName="value"，结果子组件收不到。折腾半天，发现是名字拼错了。更惨的是父传子没问题，但想跨组件时就傻了。用event bus，到处乱发消息，页面一卡一卡的。后来改用Vuex，结果版本不对，和Vue 3冲突。重新查了文档，降了个版本才算搞定。

路由坑多又深

配置路由时更头疼。设了跳转页面，点按钮后页面变空白。查了查，原来是组件没导对路径。改文件，还得手动加fallback。

• 忘记写动态路由参数，跳转404。
• 解决方法是检查每个路由对象，确保path和component都对上。

优化加载速度时又出幺蛾子。用asyncData函数异步拉数据，结果接口挂了页面崩了。加了loading状态才算稳点。

是依赖问题。项目跑得好好的，突然编译报错。一查npm包版本冲突，更新了几个小版本才稳定下来。整个过程中，总结了几点：

• 数据绑定必须初始化
• Vuex装前看兼容版本。
• 路由路径一个不能错。
• 依赖勤查文档别乱升。

项目做完后，突然想起上次老板催我加班，说这个简单活儿一天搞定。结果耗了三天，差点没脸见他。要是早点知道这些坑就好了，所以今天写下来给大伙儿避雷。