LWC 生命周期钩子全解

LWC 生命周期钩子全解Lightning Web ComponentLWC 生命周期分为组件创建渲染、更新、销毁三大阶段共 6 个核心钩子分为父组件先执行、子组件后执行的自上而下初始化更新时自下而上更新。一、完整生命周期钩子列表constructor()connectedCallback()render()renderedCallback()disconnectedCallback()errorCallback(error, stack)二、每个钩子执行时机 使用场景 注意事项1. constructor() 构造函数执行时机组件实例刚被创建DOM 还未生成、未插入页面执行顺序最先执行仅执行 1 次能访问仅this实例本身适用场景初始化普通内部变量track/ 普通属性初始化常量、默认配置继承组件时调用父类super()必须第一行禁止操作读取/修改api公共属性DOM 操作this.template.querySelector调用wire、Apex、导航、Toastthis.style/ class 样式修改示例constructor(){super();// 必须第一行this.count0;this.options[];}2. connectedCallback() 组件挂载钩子执行时机组件 DOM 构建完成插入页面 DOM 树时执行执行次数初始化 1 次组件被移除再重新插入会重复执行可用资源api属性已赋值、DOM 可访问、wire开始请求数据适用场景最常用页面加载后发起异步请求Apex、wire、第三方接口获取 DOM 元素、绑定原生 DOM 事件resize、scroll、input 监听初始化第三方图表、地图、富文本等 JS 插件读取从父组件传入的api参数做业务初始化订阅平台事件subscribe(MessageChannel)注意会多次执行弹窗隐藏再打开、if:true 切换会重复触发需做好去重复杂监听务必在disconnectedCallback销毁解绑防止内存泄漏示例connectedCallback(){// 获取DOMthis.inputElthis.template.querySelector(lightning-input);// 订阅消息this.subsubscribe(this.channel,(){});}3. render() 自定义渲染钩子执行时机DOM 渲染前每次组件需要刷新时执行初始化数据更新都会触发返回值必须返回html模板import {html} from lwc默认行为不重写则自动加载同名.html文件适用场景多模板动态切换根据权限、状态加载不同模板动态渲染不同结构页面管理员模板 / 普通用户模板限制不能修改组件状态this.xxx 会无限循环渲染不能做异步、Apex、DOM 操作示例importtemplateUserfrom./user.html;importtemplateAdminfrom./admin.html;render(){returnthis.isAdmin?templateAdmin:templateUser;}4. renderedCallback() 渲染完成钩子执行时机每次模板渲染/更新完成后执行初始化任意数据变更重绘都会触发执行频率极高修改任何track/ 模板绑定变量都会重复执行特点此时 DOM 完全渲染完毕可以稳定操作 DOM适用场景DOM 元素尺寸、位置读取图表宽高、滚动区域第三方插件二次渲染更新表格、ECharts 重绘模板动态生成元素后获取 DOM 节点滚动位置重置、焦点自动聚焦核心坑点 解决方案频繁执行容易无限循环加标记判断只执行一次hasRenderedfalse;renderedCallback(){if(this.hasRendered)return;this.hasRenderedtrue;// 仅初始化执行一次的DOM操作}5. disconnectedCallback() 组件销毁钩子执行时机组件从页面 DOM 移除时弹窗关闭、iffalse、路由跳转生命周期收尾钩子仅执行一次适用场景内存泄漏必做解绑 DOM 原生监听scroll、resize、interval 定时器取消 MessageChannel、平台事件订阅unsubscribe(this.sub)销毁第三方实例图表、地图编辑器清除setInterval/setTimeout释放全局绑定事件示例disconnectedCallback(){if(this.sub)unsubscribe(this.sub);clearInterval(this.timer);}6. errorCallback(error, stack) 异常捕获钩子执行时机子组件任意生命周期、渲染、JS 代码抛出报错时触发作用捕获子组件渲染异常防止整个页面崩溃做错误兜底展示参数error错误对象stack错误堆栈信息适用场景子组件报错兜底降级展示错误提示不阻塞父页面收集异常日志上报自定义错误页面、重试按钮限制只能捕获子组件错误不能捕获自身组件的报错示例hasErrorfalse;errorMsg;errorCallback(err,stack){this.hasErrortrue;this.errorMsgerr.message;console.error(子组件异常,stack);}三、父子组件初始化执行顺序自上而下父constructor父connectedCallback父render子constructor子connectedCallback子render子renderedCallback父renderedCallback四、父子组件更新执行顺序自下而上数据变更触发重渲染子render子renderedCallback父render父renderedCallback五、钩子使用选择速查表需求场景推荐钩子不推荐初始化变量、superconstructorconnectedCallback页面加载调Apex、订阅事件connectedCallbackrenderedCallback动态切换页面模板render其余钩子获取渲染后DOM、初始化图表renderedCallbackconstructor / connectedCallback清除定时器、解绑事件disconnectedCallback无替代捕获子组件渲染报错errorCallbacktry-catch六、高频避坑总结constructor不能碰 DOM、api、wireconnectedCallback会重复执行记得销毁监听renderedCallback高频触发必须加开关防止死循环所有定时器、事件订阅必须在disconnectedCallback清理errorCallback只抓子组件错误自身代码报错捕获不到不要在render()中修改组件响应式变量会死渲染