本文是系列文章的一部分：框架实战指南 - 基础知识
在本系列文章中，我们学习了非常多的 API！以下是迄今为止我们讲解过的所有 API 的速查表：
| 反应 | 角度 | Vue | 注释和链接 |
|---|---|---|---|
function Comp() {} | @Component() class Comp {} | Comp.vueSFC 文件 | 创建一个组件。 |
createRoot(el).render(<Comp/>) | bootstrapApplication(Component) | createApp(Comp).mount('el') | 渲染组件。 |
| 组件函数体 | 类实例属性和方法 | <script setup> | 您的 JavaScript 代码去往何处。 |
useEffect带有空数组 | effect没有儿童信号 | onMounted | 对组件安装产生副作用。 |
<p>{val}</p> | <p>{{val}}</p> | <p>{{val}}</p> | 插入val到您的模板中。此功能实时更新。 |
useState | signal | ref | 组件中的状态。 |
<div attr={val}> | <div [attr.attr]="val"> | <div v-bind:attr="val"> 或者 <div :attr="val"> | 属性绑定到元素。此功能实时更新。 |
function Comp(props) {} | input() | defineProps(['prop']) | 组件输入定义。 |
<div prop={val}> | <div [prop]="val"> | <div v-bind:prop="val"> 或者 <div :prop="val"> | 组件输入传递 |
<div onEvent={fn}> | <div (event)="fn()"> | <div v-on:event="fn()"> 或者 <div @event="fn()"> | DOM 事件绑定 |
| 将函数作为组件属性传递。 | output() | defineEmits(['output']) | 组件输出定义。 |
{bool && <div>} | @if (bool) {<div>} | <div v-if="bool"> | 有条件地渲染元素。 |
{bool ? <div/> : <div/>} | @else {} | <div v-else> | 使用“else”子句有条件地渲染。 |
| 具有不同值的多个条件。 | @else if (other) {} 或者 @switch＆@case | <div v-else-if="other"> | 使用多个“else”子句进行条件渲染。 |
{list.map(item => <div></div>)} | @for (item of list) {<div>} | <div v-for="item in list"> | 呈现列表。 |
{list.map((item, idx) => <div></div>)} | @for (item of list; let idx = $index) {<div>} | <div v-for="(item, idx) in list"> | 获取列表渲染中的索引。 |
<div key={item.id}> | @for (item of list; track item.id) {<div>} | <div :key="item.id"> | 使用键来区分列表中的元素。 |
<div key={item.id}> | 不适用 | <div :key="item.id"> | 使用键作为渲染提示。 |
useEffect从具有空依赖数组的函数返回。 | effect清理功能 | onUnmounted 或 watchEffect清理函数或 watch清理函数 | 组件卸载时的副作用清理。 |
<StrictMode> | 不适用 | 不适用 | 确保副作用清除的 API |
useEffect没有第二个参数 | 不适用 | onUpdated | 监听重新渲染。 |
useEffect使用数组来跟踪值 | effect | watch 或者 watchEffect | 组件内数据改变的副作用。 |
useLayoutEffect油漆前运行 | 由于缺少 VDOM，因此不适用 | watch与{immediate: true}和/或{flush: "post"} | 渲染/绘制/提交阶段跟踪 |
useRef | 类属性突变 | let可变突变 | 无需重新渲染即可更改数据 |
useEffect与useRef先前的值 | effect具有先前值的类属性 | watch具有旧值和新值参数 | 监听组件属性的变化 |
useMemo | computed | computed | 基于属性的计算值 |
<Fragment> 或者 <></> | <ng-container> | <template> | 透明元素 |
children具有 JSX 值的属性 | <ng-content> | <slot> | 儿童注射部位 |
| 具有 JSX 值的命名属性 | <ng-content select="name"> | <slot name="name" /> | 指定儿童注射部位 |
const refName = useRef()&<div ref={refName}> | viewChild() | const refName = ref()&<div ref="refName"> | 不会触发响应式更改的元素引用 |
<div ref={fn}> | viewChild()和afterRenderEffect | <div :ref="fn"> | 触发响应式更改的元素引用 |
useRef([])&<div ref={el => ref.current[i] = el}> | viewChildren() | ref([])&ref="refName" | 元素引用数组 |
forwardRef | 不适用 | 不适用 | 允许访问自定义组件 |
useImperativeHandle | 引用组件的所有方法和属性都默认公开 | defineExpose | 允许访问组件的内部 |
componentDidCatch | ErrorHandler | onErrorCaptured | 记录错误 |
getDerivedStateFromError | ErrorHandler+ 父级状态 | onErrorCaptured+ref | 显示错误 |
createContext | InjectionToken 或者 Injectable | 不适用 | 依赖注入上下文创建 |
Context.Provider | providers类上的数组 | provide | 依赖注入数据提供程序 |
useContext | inject | inject | 依赖注入数据注入 |
| 默认启用 | inject(SomeVal, {optional: true}) | 默认启用 | 可选注入值 |
Context.Provider在根组件中 | @Injectable({ providedIn: "root" }) | provide在根组件中 | 应用范围提供商 |
createPortal(<div/>, el) | DomPortal 或者 TemplatePortal＆cdkPortalOutlet | <Teleport to="body"> | 门户内容到其他 DOM 位置 |
| 自定义钩子 | 信号函数 | 作品 | 组件之间的逻辑共享 |
| 不适用 | @Directive() | 具有特殊属性的对象 | 指令 |
children属性和单个值传递 | contentChild() | 不适用 | 访问对单个投影子项的引用 |
Children.toArray(children) | contentChildren() | 不适用 | 访问预计儿童的参考 |
Children.count(children) | contentChildren()＆length财产 | 不适用 | 统计预计生育的儿童 |
children(val) | ng-template& 模板上下文 | <template>&v-slot | 将值传递给投影子项 |
