深入理解微信小程序attached生命周期，掌握页面加载时机

搞微信小程序开发的人，十有八九都被生命周期搞晕过。特别是attached这个钩子，官方文档就丢给你一句话，说是页面创建时触发，但真到写代码的时候，你会发现事情远没那么简单。你明明在attached里写了请求，结果数据没渲染出来；你明明在onLoad里做了初始化，换个场景又全乱了。今天咱们就把attached掰开揉碎了聊透，聊聊它到底什么时候触发、跟其他生命周期怎么配合、踩坑时怎么救场。

先说最基础也最容易被忽略的点：attached是组件层面的生命周期，不是页面层面的。很多人把页面也当组件用，所以会混淆。但真正要理解attached，你得先清楚组件实例化的时间线。在微信小程序的组件体系里，一个组件从创建到销毁，会经历created、attached、ready、moved、detached这几个关键节点。created时组件实例刚被创建，数据还没初始化，也不在节点树里；attached时组件已经被插入到页面节点树里了，这时候你可以拿到页面上的相关信息，比如通过this.triggerEvent去和父组件通信，或者用this.createSelectorQuery去查询节点。所以attached的核心意义，就是告诉你：兄弟，你现在已经挂在树上了，可以开始干活了。

那attached和onLoad的区别在哪？页面级生命周期里，onLoad是页面加载时触发，比attached要早。但注意，onLoad是页面维度，attached是组件维度。一个页面里可能有几十个组件，每个组件都有自己的attached时机，但页面只有一个onLoad。onLoad是页面整体的起点，attached是每个组件的独立起点。你如果在一个页面里用了三个自定义组件，这三个组件的attached触发顺序，取决于它们在页面里的位置和渲染顺序，而不是统一的。这就解释了为什么有时候你在onLoad里想操作某个子组件，结果发现它还没attached，拿不到实例。解决方案要么用this.selectComponent，但前提是组件已经渲染完成；要么就在子组件的attached里做自己的初始化，而不是依赖父页面的onLoad。

再深入一点，attached到底能不能拿到页面参数？很多人以为组件attached时，可以通过this.data或者options直接获取页面传递的properties，其实是可以的。properties是在组件创建时就注入的，所以在attached里访问this.是没问题的。但如果你在created里访问，有些值可能还是undefined，因为properties的赋值是异步的。所以如果你需要在组件初始化时根据传入的props做逻辑处理，attached是最安全的时机。我见过不少新手把props处理写在created里，结果打印出来全是undefined，排查半天才发现是生命周期时序的问题。

接下来聊一个高频坑：attached里发请求，数据返回后页面没更新。这个问题多半不是attached本身的问题，而是setData的时机和后端返回速度的竞争。你在attached里发起异步请求，等到数据回来时，组件可能已经ready了，甚至用户已经开始交互了。如果你在attached里setData，没问题，因为组件还没ready，但如果你在回调里setData，那就要留意组件是否已被销毁。比如用户快速退出页面，组件detached了，这时候setData会报错。所以规范做法是在attached里发请求，但用detached里的一个状态标记来控制回调里是否执行setData。这个小细节，能帮你省掉一堆线上报错。

再说说attached和ready的区别，这也是很多人迷糊的地方。attached代表组件已经插入节点树，但组件内部的子组件可能还没创建完成；ready代表组件及其子组件都已完成渲染，可以安全地进行节点查询和交互操作。所以如果你要做节点查询，比如获取组件宽度高度，必须在ready里做，attached里查不到。但如果你只是做数据初始化、事件绑定、或者调用父组件传来的方法，attached就够了。这里有个实用建议：把不依赖DOM的操作放attached，把依赖DOM的操作放ready。这样既不会因为过早执行导致拿不到节点，也不会因为过晚执行导致体验延迟。

还有一种场景，就是组件复用时attached的触发次数。比如你在一个列表里用了同一个组件，每个列表项都会创建一个新的组件实例，所以每个实例都会触发一次attached。但如果你用微信的behaviors或者mixin，要注意全局状态在多个实例间共享的问题。attached里做的初始化，每个实例各做各的，没问题；但如果你在created里改了某个全局变量，那所有实例都会受影响。所以组件的独立状态初始化，建议都放在attached里，而不是created里。

回到标题说的，掌握页面加载时机。attached不是万能的，但它确实是组件生命周期里最实用的一个节点。理解它，你就理解了组件从创建到挂载的本质。下次你在调试时，遇到组件数据没渲染、节点查不到、props拿不到，先别急着改代码，停下来想想：现在是attached之前还是之后？如果还没attached，你做什么都是白搭；如果已经attached，那问题多半出在异步时序上。微信小程序的坑，大多数不是难，而是时序。把attached吃透，你就赢了一半。剩下的，交给时间和调试工具吧。