Forem: Rex Pan

From React to Vue Cheat-sheet

Rex Pan — Wed, 10 May 2023 06:27:04 +0000

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>

Vue event Emit vs Callback Props

Rex Pan — Tue, 11 Apr 2023 04:40:58 +0000

Emit events and Callback props will be compiled to the same code

HTMLElement

PlayGround

<button :onClick="increase">prop</button>
<button @click="increase">event</button>

_createElementVNode("button", { onClick: increase }, "prop"),
_createElementVNode("button", { onClick: increase }, "event")

Vue Component

PlayGround

<Comp :onClick="increase">prop +1</Comp>
<Comp @click="increase">emit +10</Comp>

_createVNode(Comp, { onClick: increase }, { default: _withCtx(() => [ _createTextVNode("prop +1") ]), _: 1 /* STABLE */ }),
_createVNode(Comp, { onClick: increase }, { default: _withCtx(() => [ _createTextVNode("emit +10") ]), _: 1 /* STABLE */ })

Combined

<button :onClick="increase" @click="increase">prop</button>

_createElementVNode("button", { onClick: [increase, increase] }, "event")

Drawback of Callback Props

No `$event`

We cannot use $event in :onClick.

<button :onClick="increase($event.x)">prop</button> <!-- FAIL -->

Workaround is create anonymous callback but anonymous callback prop will not be cached and hurt performance. But this is easy to avoid.

PlayGround

<button :onClick="$event => increase($event.x)">prop</button> <!-- Workaround -->
<button @Click="increase($event.x)">prop</button>

_createElementVNode("button", {
    onClick: $event => increase($event.x)
}, "prop", 8 /* PROPS */, _hoisted_1),
_createElementVNode("button", {
    onClick: _cache[0] || (_cache[0] = ($event) => (increase($event.x)))
}, "event")

In v-for context will not be cached and anonymouse callback will have the same performance with emit.
Playground

<div v-for="x in xs" :key="x">
    <button :onClick="() => setY(x)">prop</button>
    <button @click="setY(x)">event</button>
</div>

return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(xs, (x) => {
    return _createElementVNode("div", { key: x }, [
        _createElementVNode("button", { onClick: () => setY(x) }, "prop", 8 /* PROPS */, _hoisted_1),
        _createElementVNode("button", { onClick: ($event) => (setY(x)) }, "event", 8 /* PROPS */, _hoisted_2),
    ])
}), 64 /* STABLE_FRAGMENT */))

Emit definition will shadow props definition

Not anymore.

Pros of Callback Props

Event tracing

With following tree (PlayGround).

<App>
    <Comp2        :onCp1 @e2>
        <Comp1    :onCp1 @e1>
            <Comp :onCp  @e >

On props callback stack, we can quick traced the App_logCp
is called by Comp2_onCp2 which is called by it's children Comp1_onCp1 which is then triggerd by Comp_onCp.

On emit, we only can traced App_logE 1 level down to Comp2_onE2.

In proper setup with source map like Vite, the <anonymous>:27:48 will be replace with App.vue.

Callback props stack
Error
    at Proxy.App_logCp (<anonymous>:27:48)
    at Proxy.Comp2_onCp2 (<anonymous>:34:34)
    at Proxy.Comp1_onCp1 (<anonymous>:34:34)
    at Comp_onCp (<anonymous>:28:32)
    at callWithErrorHandling (https://play.vuejs.org/vue.runtime.esm-browser.js:1563:18)
    at callWithAsyncErrorHandling (https://play.vuejs.org/vue.runtime.esm-browser.js:1571:17)
    at HTMLButtonElement.invoker (https://play.vuejs.org/vue.runtime.esm-browser.js:9281:5)

Emit stack
Error
    at App_logE (<anonymous>:28:46)
    at callWithErrorHandling (https://play.vuejs.org/vue.runtime.esm-browser.js:1563:18)
    at callWithAsyncErrorHandling (https://play.vuejs.org/vue.runtime.esm-browser.js:1571:17)
    at emit (https://play.vuejs.org/vue.runtime.esm-browser.js:2065:5)
    at https://play.vuejs.org/vue.runtime.esm-browser.js:8710:45
    at Comp2_onE2 (<anonymous>:35:27)
    at callWithErrorHandling (https://play.vuejs.org/vue.runtime.esm-browser.js:1563:18)
    at callWithAsyncErrorHandling (https://play.vuejs.org/vue.runtime.esm-browser.js:1571:17)
    at emit (https://play.vuejs.org/vue.runtime.esm-browser.js:2065:5)
    at https://play.vuejs.org/vue.runtime.esm-browser.js:8710:45

Forem: Rex Pan

From React to Vue Cheat-sheet

Dynamic component

Fragment

useEffect

Portal

Context

Ref

Lazy

Slot / children

Suspense

Vue event Emit vs Callback Props

HTMLElement

Vue Component

Combined

Drawback of Callback Props

No $event

Emit definition will shadow props definition

Pros of Callback Props

Event tracing

No `$event`