Lit 2 正式版发布

Lit 2：更小、更好、更快、为 SSR 做好准备，且可用于生产环境。

Sep 21, 2021

Lit Team

今天我们宣布 Lit 2 的正式版发布。Lit 2 是一个重大更新：它比以往更小、更快、更好，为服务端渲染奠定了基础，且已全部打包到 npm 上新的 lit 包中。

自从四月份我们宣布 Lit 2 的首个候选发布版以来，Lit 已经走了很长一段路。自那时起，许多合作伙伴已经在大型应用上测试了候选发布版，并反馈了轻松的升级体验、更好的性能和更小的打包体积。此外，一些合作伙伴和社区成员一直在探索新功能，如响应式控制器和实验性的服务端渲染支持。

与此同时，在 Google，我们通过将数千个 Google 内部组件升级到新版本，对 Lit 2 进行了广泛测试。

今天我们很高兴地宣布 Lit 2 已经准备就绪。

更正： lit-analyzer CLI 和 VS Code Lit 插件正在更新以兼容 Lit 2。本文最初版本错误地声称这些已经发布。

Lit 2 包含什么？

Lit 2 在保持向后兼容的同时添加了许多新功能和增强；在大多数情况下，Lit 2 应该是之前版本的直接替换。Lit 2 中的重要新功能包括：

新的指令 API。Lit 2 引入了一个新的基于类的 API 来编写自定义指令，即可以自定义 Lit 如何渲染的对象。指令本身并不新，但新 API 使它们更强大且更容易定义。
异步指令。异步指令可以在被添加到 DOM 和从 DOM 移除时收到通知，这使得指令可以执行清理工作。例如，一个异步指令可以使用这些回调来订阅和取消订阅 observable。
响应式控制器。响应式控制器是一个可以挂接到组件生命周期的对象，因此它们可以在组件更新时以及组件被添加到或从 DOM 移除时做出响应。控制器可以将与某个功能相关的状态和行为打包在一起，使其可在多个组件定义之间复用。响应式控制器可以轻松地为组件添加状态管理、动画、异步任务等功能。
元素表达式。Lit 2 的新功能是可以添加作用于整个元素的表达式，而不是修改属性、特性或元素的子元素。元素表达式对于需要操作多个属性或调用元素方法的指令很有用。
例如，一个实验性的动画包 @lit-labs/motion 提供了一个 animate() 指令，可以在元素状态变化时执行动画。例如，以下代码片段在列表重新排序时为列表项执行动画。
```
html`
  ${repeat(items,
    (item) => item.id,
    (item) => html`<div ${animate()}>${item}</div>`)
  }`
```
要查看 animate 指令的更完整示例，请参阅该包的 README。
静态表达式。同样在 Lit 2 中新增的静态表达式允许你在处理之前将常量或很少更改的值插值到模板中。静态表达式可以在普通表达式不能使用的各种地方使用——例如，在标签名位置：
```
const tagName = literal`button`;
html`<${tagName}></${tagName}>`
```
为 SSR 做好准备。Lit 2 被重建为 SSR-ready。新的 @lit-labs/ssr 包为 Node.js 上的 Lit 实现了快速、流式 SSR。SSR 支持目前仍是实验性的；我们正在进行完成和测试 SSR 库的工作。

除了 Lit 库中的新功能外，我们还在 Lit 周围做了一些额外的更改：

所有 Lit 相关项目都在一个新的 GitHub 组织中。大多数 Lit 相关代码已移至一个 monorepo，以便于测试更改。
该 monorepo 还包括一些实验性项目，包括 Lit 和其他 Web Components 的服务端渲染支持；动画辅助工具；以及用于异步任务的 Lit 控制器。实验性项目在 @lit-labs npm scope 下发布。
全新网站 lit.tips，拥有指南、API 文档、教程和交互式代码编辑器。我们在最初的 Lit 候选发布版发布时上线了该网站；此后我们添加了两个用户最需要的功能：站内搜索，以及对 JavaScript 用户更好的支持，包括可切换的 JavaScript/TypeScript 代码片段。

RC 1 之后的变更

自初始 RC 以来，大部分变更都是 bug 修复。一些值得注意的更改：

元素断开连接时不再暂停元素生命周期。这回退了 Lit 中一个导致一些微妙 bug 的更改。如果你使用某个 Lit 2 候选发布版开发了异步指令，你可能需要做一些更改。详情请参见 PR #2034。
开发构建中更好的运行时警告。有关使用开发构建的信息，请参阅开发和生产构建。

完整的变更列表请参阅变更日志。

开始使用 Lit 2

想试试 Lit 2？访问 lit.tips 开始使用。该网站拥有交互式教程目录帮助你入门 Lit 2，一个用于实时编码的交互式 playground、指南和 API 文档。

想讨论 Lit？加入 Lit Discord 参与关于 Lit 和 Web Components 的讨论，或者在我们的 GitHub Discussions 版块发起讨论。

阅读更多文章