Framework Comparison Table

March 11, 2024

931 words

Post contents

We've looked at a lot of APIs in this series! Here's a cheatsheet for all the APIs we've covered to this point:

ReactAngularVueNotes & Link
function Comp() {}@Component() class Comp {}Comp.vue SFC fileCreates a component.
createRoot(el).render(<Comp/>)bootstrapApplication(Component)createApp(Comp).mount('el')Renders the component.
Component function bodyClass instance properties and methods<script setup>Where your JavaScript code goes.
useEffect with empty arrayngOnInitonMountedSide effect on component mount.
<p>{val}</p><p>{{val}}</p><p>{{val}}</p>Interpolate val into your template. This live-updates.
useStateClass propertiesrefState in a component.
<div attr={val}><div [attr.attr]="val"><div v-bind:attr="val"> or <div :attr="val">Attribute binding to an element. This live-updates.
function Comp(props) {}@Input()defineProps(['prop'])Component input definition.
<div prop={val}><div [prop]="val"><div v-bind:prop="val"> or <div :prop="val">Component input passing
<div onEvent={fn}><div (event)="fn()"><div v-on:event="fn()"> or <div @event="fn()">DOM event binding
Pass a function as component property.@Output()defineEmits(['output'])Component output definition.
{bool && <div>}<div *ngIf="bool"><div v-if="bool">Conditional render an element.
{bool ? <div/> : <div/>}*ngIf="bool; else templ" where templ is an ng-template<div v-else>Conditionally render with an "else" clause.
Multiple conditionals with different values.ngSwitch & *ngSwitchCase<div v-else-if="other">Conditional render with multiple "else" clauses.
{ => <div></div>)}<div *ngFor="let item of list"><div v-for="item in list">Rendering a list.
{, idx) => <div></div>)}<div *ngFor="let item of list; let i = index"><div v-for="(item, idx) in list">Get an index in a list render.
<div key={}>*ngFor="let item of list; trackBy: itemTrackBy"<div :key="">Using a key to distinguish element in a list.
<div key={}>N/A<div :key="">Using a key as a render hint.
Return function from a useEffect with an empty dependency array.ngOnDestroyonUnmounted or watchEffect cleanup function or watch cleanup functionSide effect cleanup on component unmount.
<StrictMode>N/AN/AAPI to ensure side effect cleanup
useEffect with no second argumentN/AonUpdatedListen for re-renders.
useEffect with an array of values to trackTrigger side effect on mutation functionwatch or watchEffectIn-component data change side effects.
useLayoutEffect to run before paintN/A due to lack of VDOMwatch with {immediate: true} and/or {flush: "post"}Render/paint/commit phase tracking
useRefngZone.runOutsideAngularlet variable mutationChange data without a re-render
useEffect with useRef of previous valuengOnChangeswatch with old and new value argumentsListen for component property changes
useMemo@Pipe()computedProperty-based computed values
<Fragment> or <></><ng-container><template>Transparent elements
children property with a JSX value<ng-content><slot>Children injection site
Named properties with a JSX value<ng-content select="name"><slot name="name" />Named children injection site
const refName = useRef() & <div ref={refName}>@ViewChild()const refName = ref() & <div ref="refName">Element reference that doesn't trigger reactive change
<div ref={fn}>@ViewChild() with ngAfterViewInit<div :ref="fn">Element reference that triggers reactive change
useRef([]) & <div ref={el => ref.current[i] = el}>@ViewChildren()ref([]) & ref="refName"Array of element references
forwardRefN/AN/AAllow access to a custom component
useImperativeHandleAll methods and properties from the referenced component are exposed by defaultdefineExposeAllow access to component's internals
componentDidCatchErrorHandleronErrorCapturedLog an error
getDerivedStateFromErrorErrorHandler + parent stateonErrorCaptured + refDisplay an error
createContextInjectionToken or InjectableN/ADependency injection context creation
Context.Providerproviders array on classprovideDependency injection data provider
useContextinjectinjectDependency injection data injection
Enabled by defaultinject(SomeVal, {optional: true})Enabled by defaultOptional injected values
Context.Provider in root component@Injectable({ providedIn: "root" })provide in root componentApp-wide providers
createPortal(<div/>, el)DomPortal or TemplatePortal & cdkPortalOutlet<Teleport to="body">Portal contents to other DOM location
Custom HooksServicesCompositionsLogic sharing between components
N/A@Directive()Object with special propertiesDirectives
children property and single value passed@ContentChild()N/AAccess a reference to a single projected child
Children.toArray(children)@ContentChildren()N/AAccess a reference to projected children
Children.count(children)@ContentChildren() & length propertyN/ACount projected children
children(val)ng-template & Template Context<template> & v-slotPass values to projected children
Previous articleAccessing Children

Subscribe to our newsletter!

Subscribe to our newsletter to get updates on new content we create, events we have coming up, and more! We'll make sure not to spam you and provide good insights to the content we have.