Custom Elements 生命周期与 Lit 的映射关系详解

很多人在利用 Lit 时，会有一种“不太踏实”的感觉：

生命周期似乎不多？
没有 beforeMount / mounted / beforeUpdate？
这真的够用吗？

缘故起因在于：

Lit 并没有“发明生命周期”，
它只是老实地站在 Custom Elements 之上。

本文将从 欣赏器原生生命周期 出发，表明：

• Custom Elements 提供了什么
  
• Lit 在这些生命周期上做了哪些封装
  
• Lit 的生命周期为什么这么“少”
  
• 与 Vue / React 生命周期的本质差异
  

一、先给结论（Very Important）

Lit 的生命周期不是“简化版 Vue”，
而是“Custom Elements 生命周期 + 更新阶段钩子”。

明白这一点，背面齐备都会顺。
二、Custom Elements 的原生生命周期

Web Components（Custom Elements）规范只界说了 4 个生命周期回调：

1. class MyElement extends HTMLElement {
2.   constructor() {}
3.   connectedCallback() {}
4.   disconnectedCallback() {}
5.   attributeChangedCallback() {}
6. }

复制代码

就这么多，没有多余概念。
2.1 constructor

• 元素被创建
  
• 尚未插入 DOM
  
• 不应该访问 DOM / attributes
  

1. constructor() {
2.   super()
3. }

复制代码

2.2 connectedCallback

• 元素被插入文档
  
• 可以访问 DOM
  
• 大概被多次调用（移动节点）
  

1. connectedCallback() {
2.   console.log('attached')
3. }

复制代码

2.3 disconnectedCallback

• 元素从文档移除
  
• 用于整理副作用
  

1. disconnectedCallback() {
2.   console.log('detached')
3. }

复制代码

2.4 attributeChangedCallback

• 监听 attribute 变革
  
• 必须显式声明 observedAttributes
  

三、Lit 是怎样“站在”这些生命周期之上的

Lit 并没有绕过这些生命周期，而是：

在 Custom Elements 生命周期中插入“更新流程”

3.1 LitElement 的根本布局

1. class LitElement extends ReactiveElement {
2.   render() {}
3. }

复制代码

真正的邪术发生在 ReactiveElement 中。
四、Lit 的完备生命周期实验次序（重点）

当一个 Lit 组件被利用时，实际实验次序是：

1. constructor
2.   ↓
3. connectedCallback
4.   ↓
5. 第一次 requestUpdate
6.   ↓
7. shouldUpdate
8.   ↓
9. willUpdate
10.   ↓
11. render
12.   ↓
13. updated

复制代码

这是真正须要明白的生命周期链。
五、Lit 生命周期逐个拆解

5.1 constructor

1. constructor() {
2.   super()
3. }

复制代码

特点：

• 不能访问 DOM
  
• 不要在这里做副作用
  
• 不要 set 相应式属性（会触发更新）
  

5.2 connectedCallback

1. connectedCallback() {
2.   super.connectedCallback()
3. }

复制代码

用途：

• 启动副作用（变乱监听、observer）
  
• 定时器
  
• 与外部体系创建毗连
  

留意：

connectedCallback ≠ mounted

它大概被调用多次。
5.3 requestUpdate（隐式生命周期）

Lit 中没有显式的 beforeMount，
但 requestUpdate 实际上就是更新的出发点。

1. this.requestUpdate()

复制代码

5.4 shouldUpdate

1. shouldUpdate(changedProps) {
2.   return true
3. }

复制代码

这是 Lit 给你的唯一更新拦截点。

• 返回 false → 跳过整个更新流程
  
• 非常恰当做性能控制
  

5.5 willUpdate

1. willUpdate(changedProps) {}

复制代码

用途：

• 基于属性变革，派生内部状态
  
• 雷同 Vue 的 watch + computed
  

不要在这里利用 DOM
5.6 render（核心）

1. render() {
2.   return html`...`
3. }

复制代码

特点：

• 每次更新都会实验
  
• 必须是纯函数
  
• 不应该产生副作用
  

5.7 updated

1. updated(changedProps) {}

复制代码

用途：

• DOM 已经更新完成
  
• 安全利用 DOM
  
• 雷同 Vue 的 updated / mounted
  

5.8 disconnectedCallback

1. disconnectedCallback() {
2.   super.disconnectedCallback()
3. }

复制代码

用途：

• 整理副作用
  
• 取消变乱 / observer / timer
  

六、Lit 生命周期为什么“这么少”？

这是一个筹划效果，不是本领不敷。
6.1 Lit 把生命周期拆成两类

• 元素生命周期（来自欣赏器）
  
• 更新生命周期（围绕 render）
  

而不是像 Vue 那样混淆在一起。
6.2 对比 Vue 生命周期

VueLitbeforeCreateconstructormountedfirstUpdated / updatedbeforeUpdateshouldUpdateupdatedupdatedunmounteddisconnectedCallbackLit 的生命周期不是少，而是更贴近底层模子。
七、一个非常容易踩的坑（Important）

错误认知

“connectedCallback 只会实验一次”

正确认知

只要元素被移除再插入，就会再次实验

因此：

• 不要在这里假设“只初始化一次”
  
• 真正的一次性逻辑可以放在 firstUpdated
  

八、firstUpdated：Lit 的“妥协点”

1. firstUpdated() {
2.   // 只执行一次
3. }

复制代码

这是 Lit 提供的唯逐一个非原生生命周期，目的只有一个：

满足开发者对“mounted once”的直觉需求

九、为什么 Lit 不提供更多生命周期？

由于：

• 生命周期越多，心智负担越重
  
• 欣赏器模子已经富足清晰
  
• 多余的钩子会粉饰真实实验次序
  

Lit 的选择是：

让开发者面临真实模子，而不是被抽象包裹

十、在工程实践中的发起（IIImportant）

10.1 保举的利用方式

场景生命周期初始化状态constructor启动副作用connectedCallback派生状态willUpdateDOM 利用updated / firstUpdated整理资源disconnectedCallback十一、一个核心结论（Remember）

Lit 的生命周期不是“不敷用”，
而是“不替你做决定”。

它把控制权交还给：

• JavaScript
  
• 欣赏器
  
• 架构筹划者