connectedCallback() & disconnectedCallback()

同学们，今天咱们来聊聊 Lightning Web Components 里两个非常重要的生命周期钩子：connectedCallback 和 disconnectedCallback。 你可以把 connectedCallback 理解为组件“登场”的时刻——只要组件被插入到 DOM 树上，这个钩子就会自动触发。 这个时候，你可以安全地访问 this.template（也就是组件的模板）和 this（组件自身的主机元素）。 所以咱们通常在这里做初始化工作，比如去服务器拿数据、设置一些缓存、绑定事件监听、订阅消息频道，甚至是做页面导航，这些都是很合适的。 不过要注意两个特别重要的点： 第一，connectedCallback 可不是只触发一次。如果组件从 DOM 上被移走，后来又插回来，比如用 v-if 之类的条件渲染，或者被其他操作移动了位置，它就会再次触发。所以如果你有一些真的只想跑一次的操作，就得用个保护标志自己记住，避免重复执行。 第二，在 connectedCallback 执行的时候，子组件的元素你还拿不到——因为这个时候它们自己还没完成连接呢。想操作子元素，得换个时机。 说完登场，再说退场。disconnectedCallback 就正好对应“离开 DOM”的时刻。 这时候应该做一些清理工作，比如把你之前设的缓存清掉、事件监听解绑、消息频道取消订阅，避免内存泄漏或者意外行为。 另外，有一个常见的坑，一定要记住：千万不要把 connectedCallback 和 disconnectedCallback 标记成 async。 如果你加了 async，框架可不会等你，它直接就往下走了，这会让整个执行顺序变得混乱，很难调试。 那如果确实里面有异步操作怎么办？可以调用一个单独的异步辅助方法，在方法内部处理好，但钩子本身保持同步。 最后提一句，因为属性的赋值是发生在构造函数和 connectedCallback 之间的，所以在 connectedCallback 里，组件的公开属性（用 @api 装饰的那些）已经是可用的状态了。 好，这节课就这么两点一坑，把握好了，组件的初始化与清理就会很顺畅。咱们下次见。