最近闲不住，又手痒搞小程序开发了，琢磨着用vue3试试，毕竟都说它性能好、代码简洁。结果好家伙，一动手就踩了个大坑，妈的，真tm上头。

先交代下背景，为啥选vue3？之前用过react做微信小程序，感觉维护起来一团麻，听说vue3爽点，就屁颠屁颠开干。启动项目，直接用了vue-cli，创建一个新项目，爽的一批，template渲染飞快，以为万事大吉。谁知道这只是开头。

踩到第一个坑：页面跳转路径问题

页面结构做完了，准备加路由跳转，在小程序里写了个按钮触发路由切换。vue3的useRouter用起来顺手，想着简单跳转肯定没问题。结果点击按钮后，页面直接崩了，空白一片。我懵圈了，反复检查代码，路径明明对的，为啥跑不起来？折腾半天才发现，小程序里路径不能用绝对路径，得改成了相对路径。妈的，白费半天功夫，重写一通才搞定。后来问圈内人，都说80%新手都卡这儿，简直浪费时间。

接着第二个坑：动态组件加载

接着捣鼓动态组件，心想vue3的setup语法香爆了，直接import组件动态渲染。写了个代码，在小程序模拟器里跑，效果还行，美滋滋。可一上传真机测试，完蛋，组件死活加载不出来，页面卡成幻灯片。我以为是手机问题，换了几个设备，都一样。查日志发现是资源加载错误，原来小程序环境不支持import动态路径，得手动打包优化。折腾到半夜，改成了全局注册加异步加载，总算顺溜了。这坑深，害我灌了两瓶红牛。

然后第三个坑：响应式数据绑定

数据绑定这块，我用了vue3的ref和reactive，感觉比vue2简单多了。渲染列表数据时，加了点计算属性，在小程序里显示挺快，没出毛病。可更新数据后，问题来了，UI不自动刷新，刷新按钮点了才能变。我骂咧咧调试，发现小程序的自定义组件封装和vue3响应式打架了。试了各种hack，改成watch监听加特定事件触发，数据才活起来。这玩意坑人，踩下去爬半天，朋友吐槽说新手八成倒这儿，浪费脑细胞。

一个坑：样式全局污染

项目快收尾了，搞布局美化，用了vue3的scoped CSS，觉得隔离完美。谁知道在小程序里，莫名其妙一堆元素样式打架，按钮乱漂移。我以为是兼容性问题，查半天没头绪，加了个ul标签列表测试，结果真出bug了。原来是全局样式污染，小程序框架默认加了些base样式，得手动覆写覆盖掉。一狠心，写了个清除全局样式的插件，打包后跑通才算ok。累成狗，回头才知80%人疏忽这个，气得我直挠头。

整体搞下来，vue3开发小程序确实快，但坑多到数不过来，每个都得试错修正。总结这经历：

• 路由路径要相对别绝对，省时间。
• 动态组件得手动加载，别偷懒。
• 数据绑定加监听，不然卡死。
• 样式覆盖全局污染，必须处理透。

折腾完项目上线后，效果还行，不过下次肯定先避坑。你们要是玩这个，多动手调试，别信文档太死板。好了，分享到这，我得去补觉了。