一、理解 LWC 与 Aura 共存
如果你投入时间精通 Aura，本模块是你通向未来的桥梁。学习 Aura 概念如何映射到 LWC——从 .cmp 迁移到 .html、Aura 表达式转标准 JavaScript、组件事件替换为 DOM CustomEvent、数据访问和组件组合的新模式。
为什么选择 LWC？它能和 Aura 组件共存吗？
Aura 多年前构建，当时组件的 Web 标准还不存在；LWC 建立在现在存在的 W3C Web Components 标准上。LWC 优势：现代 JavaScript（ES6+）、更快渲染（浏览器原生执行）、更少代码（更简单模式、每组件更少文件）、技能可迁移（标准 JS/HTML/CSS）。
共存——它们协同工作：Aura 组件可以包含 Lightning web components（把新 LWC 包进现有 Aura 应用框架）；LWC 不能包含 Aura 组件（但可通过事件通信）；两者共享同一 org、数据、安全模型。
迁移策略——不要一次性重写：① 新功能用 LWC 构建 ② 需要大幅修改 Aura 组件时顺便迁移 ③ 稳定工作的 Aura 组件留着（无限期继续工作）④ 从叶子组件（无子组件，依赖最少）向内迁移。迁移是旅程而非「flag day」，两者无限期共存，在增加价值时才迁移。
二、迁移 Markup 与 CSS
动手迁移的核心：把 Aura markup 转 LWC HTML、Aura 表达式和条件转标准 HTML 语法、aura:iteration 替换为 for:each、迁移 CSS。
Aura Markup → LWC HTML：语法转换
文件结构：Aura（.cmp + Controller.js + Helper.js + Style.css）→ LWC（.html + .js + .css，仅 2-3 文件）。关键语法迁移：
- 属性 → JS 属性：
<aura:attribute>→@api property;。 - 表达式：
{!v.xxx}→{xxx}（去掉!v.）。 - 条件：
aura:if→lwc:if或if:true|false。 - 迭代：
aura:iteration→for:each（必须加唯一 key）。 - 初始化：
aura:handler name="init"→connectedCallback()。 - 复杂表达式：
{!v.price > 500000 && v.bedrooms >= 3}→ 移到 JavaScript getter（get isLuxury() {...}），用{isLuxury}。
CSS 迁移：THIS.css → 同名 .css 文件，但由 Shadow DOM 作用域，无样式泄漏，SLDS class 两种模型同样适用。
三、迁移 JavaScript——模块、代码共享与重构
Aura 用专有模块系统（ltng:require），LWC 用标准 ES Modules（import/export）。覆盖 Aura 与 LWC 间共享代码、第三方 JS 库、以及为什么迁移是重构的绝佳机会。
LWC 中的 JavaScript：模块、共享与简化
ES Modules 替代 Aura 专有系统：import { helper } from 'c/myModule'（标准 JS import，IDE 能理解）。迁移期间共享代码：把共享逻辑抽到独立 ES module，Aura 和 LWC 都 import；用 Lightning Message Service（LMS）做过渡期跨模型通信。
第三方 JS 库：上传为 Static Resource → import d3 from '@salesforce/resourceUrl/d3'；大库用 loadScript() 动态加载。动态组件创建：Aura $A.createComponent() → LWC 无直接等价物，改用 lwc:if/if:true|false 声明式条件渲染（声明式优于命令式）。
迁移即重构：Aura 分离的 Controller.js/Helper.js → LWC 单个 .js 文件，函数组织更清晰；删除累积的死代码；有意区分 @api（公共）vs 普通属性（私有），隐藏实现细节。迁移不只是语法翻译——是构建更好组件的机会。
四、处理数据、组合组件与通信
三个剩余的关键迁移：数据访问模式（force:recordData → @wire 和 record forms）、组件组合（Aura facets → LWC slots）、事件通信（Aura 专有事件 → DOM CustomEvent + pub-sub）。
数据、组合与事件——最后的迁移步骤
数据访问：简单 CRUD force:recordData → lightning-record-*-form（LWC 零 JavaScript）；读数据 → @wire(getRecord)；写数据 → LDS 函数（createRecord/updateRecord/deleteRecord）；自定义 Apex → 同样的 @AuraEnabled 方法（@wire 响应式读或命令式 DML）。
组件组合：Aura facets（<aura:set attribute="header">）→ LWC slots（<slot name="header">，未命名默认 slot 捕获其余）。
数据绑定关键差异：Aura 默认双向绑定（子组件变化自动传播到父，方便但产生难调试的链条）；LWC 单向绑定（父传属性向下、子发事件向上，更明确、更可调试、更可预测）。
事件：Aura 组件事件 → CustomEvent（this.dispatchEvent() + bubbles: true）；Aura 应用事件 → LMS pub-sub 模式。从 LWC 向包裹的 Aura 发事件：CustomEvent 带 bubbles: true, composed: true——composed: true 让事件穿透 Shadow DOM 边界到达 Aura 父组件。两者通过标准 DOM 事件通信，无需专有桥接。
文章来源：Trailhead - Lightning Web Components for Aura Developers