从Vue到微信小程序，这套迁移实战指南请收好

先别急着打开微信开发者工具。我见过太多Vue开发者，一上来就照着Vue的写法去写小程序，结果页面渲染不出来、事件绑定失效、数据更新了视图纹丝不动，在社区里骂骂咧咧地发帖求助。其实，从Vue迁移到微信小程序，核心不是学会新语法，而是忘掉Vue的思维惯性。你得接受一个扎心的事实：小程序不是Vue，它连DOM都没有，更没有什么虚拟DOM。你之前那套组件通信、生命周期、响应式数据的心法，在这里得换个姿势重新修炼。

先说模板语法。Vue里写`v-if`、`v-for`、`:class`、`@click`，小程序里对应的是`wx:if`、`wx:for`、`class="{{...}}"`、`bindtap`。看着像，但坑也不少。比如`v-for`的key，Vue里你用`:key="item.id"`，小程序里得写`wx:key="id"`——注意，这里不带`item.`前缀，直接写属性名。再比如事件传参，Vue里`@click="handleClick(item)"`，小程序里得写成`bindtap="handleClick"`，然后在`data-*`属性上挂参数，`e.currentTarget.dataset`里去取。我一开始老忘，写成了`bindtap="handleClick(item)"`，结果点击时直接报错，页面白屏，愣是排查了半天才反应过来。

数据绑定这块，Vue的`data`是个对象，你在`methods`里改，视图自动更新。小程序呢？`data`也是对象，但你想改它，必须走`this.setData({ xxx: newValue })`。很多人觉得麻烦，其实这是小程序最良心的设计——它强制你明确告诉框架“我要更新哪块数据”，而不是像Vue那样靠依赖收集瞎猜。好处是性能更可控，坏处是如果你习惯了Vue的“随手改”，一不留神就会忘记setData，然后对着屏幕发呆：为什么我改了数据，页面没反应？我的建议是，所有数据更新一律走setData，哪怕你觉得“这个值不会变”，也养成习惯。另外，setData是异步的，如果你需要更新后立刻拿值，得用回调函数，别指望同步读取。

组件化是Vue的看家本领，小程序也支持自定义组件，但两者的心智模型完全不同。Vue的组件通信靠props和emit，父子组件之间像打电话，清晰明了。小程序组件通信呢？父传子用properties，子传父用triggerEvent，原理差不多，但写法上多了很多“仪式感”。比如properties里你得声明`type`和`value`，不像Vue那样直接写个`prop: String`就行。更麻烦的是，小程序的组件样式默认是隔离的，你在父组件里给子组件写样式，根本不起作用。Vue里你可以用`::v-deep`搞定，小程序里你得在子组件的`options`里加一句`styleIsolation: 'apply-shared'`，否则只能在子组件内部改样式。这种细节，文档里写得隐晦，实战中踩一次坑才记得住。

生命周期函数的差异，是迁移路上的另一道坎。Vue的`created`、`mounted`、`beforeDestroy`，小程序对应的是`onLoad`、`onReady`、`onUnload`。乍一看差不多，但有个致命区别：小程序的`onLoad`只执行一次，而且页面每次显示都会触发`onShow`。如果你在Vue里习惯把初始化逻辑写在`mounted`里，迁移到小程序时得想清楚——这个逻辑是页面第一次加载时跑，还是每次从后台切回来时跑？我遇到过同事把请求数据写在`onLoad`里，结果页面从A跳到B再返回A，数据不刷新，用户看到的是旧内容，当场就懵了。正确做法是区分场景：一次性初始化放`onLoad`，每次可见时的更新放`onShow`。

路由和页面跳转，Vue用`vue-router`，小程序用`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`。区别不只是API名字变了，而是导航栈的管理逻辑不同。Vue的`router.push`可以随便压栈，小程序里`navigateTo`最多只能开10层页面，超过了就白屏。更坑的是，小程序没有URL参数这个概念，传参全靠`url?key=value`，接收方在`onLoad`里的`options`对象里拿。如果你传的是对象，还得先`encodeURIComponent`转成字符串，接收方再`decodeURIComponent`解析回来。这一套流程，Vue里根本不存在，所以迁移时最容易漏掉。我的习惯是，写一个全局的工具函数，专门处理参数序列化和反序列化，避免每次手写。

状态管理这块，Vue有Vuex、Pinia，小程序有全局`app.globalData`，也有第三方库如`mobx-miniprogram`。但说实话，项目不大时，别急着上状态管理库。小程序里最简单的状态共享就是`app.globalData`，配合`getApp()`访问，够用。但你要注意，`globalData`不是响应式的，你改了它，页面不会自动更新。如果你想实现响应式，要么用`setData`手动同步，要么引入`mobx-miniprogram-bindings`。我见过不少团队，一上来就上mobx，结果代码复杂度飙升，调试起来比Vuex还痛苦。我的建议是：先梳理清楚哪些数据是真正跨页面共享的，如果只有一两个，直接用`globalData`加`setData`回调，简单粗暴；如果多了，再考虑引入状态管理库。

说下样式和布局。Vue项目里你习惯了scoped样式，小程序里没有这个功能，所有类名都是全局的。这意味着你在组件里写的`.container`，可能会和另一个组件的`.container`冲突。解决办法是BEM命名法，或者给每个组件加一个独特的父类名。另外，小程序不支持`rem`，推荐用`rpx`（响应式像素），设计稿750px宽，1px等于1rpx，换算起来很方便。但要注意，`rpx`在小屏手机上会等比缩放，如果你的设计稿是375px宽（iPhone X的视觉稿），那1px等于2rpx，别搞混了。

说回开头那个问题——为什么那么多Vue开发者迁移时骂街？因为大家总是带着“Vue是标准答案”的心态去套小程序，结果发现处处碰壁。其实，小程序和Vue是两套不同的技术体系，没有谁优谁劣，只有适不适合。从Vue到小程序，你要做的不是翻译代码，而是调整思维：放弃虚拟DOM的幻想，拥抱setData的直白；放下组件通信的优雅，接受properties和triggerEvent的笨拙；别指望生命周期自动帮你搞定一切，多想想onShow和onLoad的分工。把这些心法记住，迁移之路才能少踩几个坑。这套指南不是让你照抄代码，而是帮你在动手之前，先把脑子里的那套Vue逻辑格式化一遍。