From React to Vue Cheat-sheet
Tags: react, vue
Published: 2023-05-10 06:27:04

---
title: From React to Vue Cheat-sheet
published: true
description: 
tags: react,vue
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-10 06:15 +0000
---

# Dynamic component

```jsx
const Component = isLogin ? AuthorizedPage : LoginPage;
(<Component />);
```
```vue
<component :is="isLogin ? AuthorizedPage : LoginPage"></component>
```
Document:
- Vue [`:is`](https://vuejs.org/api/built-in-special-attributes.html#is)

# Fragment

```jsx
(<>
    <h1 />
    <p />
</>)
```
```vue
<template>
    <h1 />
    <p />
</template>
```

# useEffect

```js
// React
useEffect(f, xs)

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

```js
// 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

```jsx
createPortal(<>...</>, portalDomElement)
```
```vue
<teleport to="#portalDomId">...</teleport>
```

# Context
```jsx
// 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

```TypeScript
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

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

# Slot / children

`Child.vue`
```vue
<template>
    <slot :a="1" :b="2">
        fallback content
    </slot>

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

- `Parent.vue`
```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](https://vuejs.org/guide/built-ins/suspense.html)

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

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

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

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