From React to Vue Cheat-sheet

Dynamic component

const Component = isLogin ? AuthorizedPage : LoginPage;
(<Component />);

<component :is="isLogin ? AuthorizedPage : LoginPage"></component>

Document:

• Vue :is

Fragment

(<>
    <h1 />
    <p />
</>)

<template>
    <h1 />
    <p />
</template>

useEffect

// React
useEffect(f, xs)

// Vue
watch(() => xs, (o, n, onCleanup) => onCleanup(f()), { immediate:true })
watchEffect((onCleanUp) => onCleanUp(f()))

// React
useEffect(function f() {
    /* use */ dependency1, dependency2;
    return function cleanUp() { /* clean up */ }
}, [dependency1, dependency2])

// Vue
watch(() => [dependency1, dependency2], (o, n, onCleanup) => {
    /* use */ dependency1, dependency2;
    onCleanup(function cleanUp() { /* clean up */ })
}, { immediate:true })
watchEffect((onCleanUp) => {
    /* use */ dependency1, dependency2;
    onCleanup(function cleanUp() { /* clean up */ })
})

Portal

createPortal(<>...</>, portalDomElement)

<teleport to="#portalDomId">...</teleport>

Context

// React
import { createContext, useContext } from "react"
const MyContext = createContext()
function Ancestor() {
    return (<MyContext.Provider value={value}>...</MyContext>)
}
function Descendant() {
    const value = useContext(MyContext)
}

// Vue
import { provide, inject } from "vue"
// Ancestor.vue
provide("key", value)
// Descendant.vue
const value = inject("key")

Ref

import { ref, onMounted } from 'vue'
const rInput = ref<HTMLInputElement | null>(null)

// ChildComponent.vue
defineExpose({ open })

// ParentComponent.vue
const rChild = ref<InstanceType<typeof ChildComponent>|null>(null)
rChild.value?.open()

Lazy

import { lazy } from "react";
const LazyComponent = lazy(() => import("./Component"));

import { defineAsyncComponent  } from "vue";
const LazyComponent = defineAsyncComponent(() => import("./Component"));

Slot / children

Child.vue

<template>
    <slot :a="1" :b="2">
        fallback content
    </slot>

    <slot name="header" v-bind="headerSlotProps"></slot>
<template>

• Parent.vue

<template>
    <Child v-slot="defaultSlotProps">
        default slot content {{ defaultSlotProps.a }} {{ defaultSlotProps.b }}

        <template #default="defaultSlotProps">
            default slot content {{ defaultSlotProps.a }} {{ defaultSlotProps.b }}
        </template>

        <template #header="headerSlotProps">
            header slot content
        </template>
        <template #["header"]>
            header slot content
        </template>
        <template v-slot:["header"]>
            header slot content
        </template>
    <Child/>
<template>

Suspense

Parent.vue

<script setup>
import { Suspense } from "vue"
</script>
<template>
    <Suspense>
        <Child />

        <template #fallback>
            loading...
        </template>
    </Suspense>
</template>

Child.vue

<script setup>
const res = await fetch(...)
const posts = await res.json()
</script>

<template>
  {{ posts }}
</template>