slides.md

theme	title	download	monaco	highlighter	routerMode	colorSchema	info
default	Introduction new feature in Vue 3	true	false	Prism	hash	dark	## Introduction new feature in Vue 3 By Lucky Dewa Satria.

<style> @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); h1{ font-family: 'Press Start 2P', sans-serif; } </style>

Vue.js

---

Vue vs react

2014

184k

2013

169k

*Last Updated 30 May 2021

---

NPM Download Trends

*Last Updated 30 May 2021

---

Big Companies Using Vue

---

Vue is Easy to Use

and Learn

---

Vue is Easy to Use and Learn

https://2018.stateofjs.com/front-end-frameworks/vuejs/

---

Vue is Easy to Use and Learn

https://2018.stateofjs.com/front-end-frameworks/react/

---

Vue is Easy to Use and Learn

https://www.monterail.com/state-of-vue-2021-report/

---

Vue is Easy to Use and Learn

https://www.monterail.com/state-of-vue-2021-report/

---

Vue is Good!

• Lightweight (20KB min+gzip)


• Performant

---

Vue is Options based

new Vue({
  data: {
    message: 'Hello World!',
    count: 0,
  },
  computed: {
    fullname() {
      /* ... */
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
});

---

Vue 3

---

Vue 3

smaller + faster new features exposes lower level APIs improved TypeScript supoort more maintainable codebase

---

No Reactivity

Caveats

---

Current Reactivity Caveats

- setting a new array item - adding a new object - deleting an object property

---

Setting a new array item

// Vue 2
Vue.set(this.users, index, 'Antonio');

// Vue 3
this.users[index] = 'Antonio';

---

Setting a new object property

// Vue 2
Vue.set(this.user, age, 32);

// Vue 3
this.user.age = 32;

---

Deleting an object property

// Vue 2
Vue.delete(this.user, age, 32);

// Vue 3
delete this.user.age;

---

Teleports

---

Teleport: Source

<template>
  <div>
    <router-view>
    <div id="teleport-target"></div>
  <div>
</template>

---

Teleport: Source

<template>
  <div>
    <button @click="isRendered = !isRendered">
      Render content
    </button>
    <Teleport to="#teleport-target">
      <div>Hello World!</div>
    </Teleport>
  <div>
</template>

---

---

Teleport: Use Cases

modals, notifications, and popups

layout content like withinsidebar, menu, and footer

---

Sound familiar?

---

In Vue 3 it Works

<template>
  <div>
    <div>Hello</div>
    <div>World!</div>
  <div>
</template>

Vue 2

<template>
  <div>Hello</div>
  <div>World!</div>
</template>

Vue 3

---

Multiple v-models

<template>
  <CustomForm v-model="name" />
</template>

Vue 2

<template>
  <CustomForm v-model:name="name" v-model:email="email" />
</template>

Vue 3

---

Composition API

Advanced Feature

Addition to the current API

Options API is not being deprecated

---

Why Composition API

Code organiztion

Logic Reuse

---

Composition API Benefits

Extremly Flexible

Clear source of properties

Performance

No namespace collision

---

Good Fit For

component code grows too long

team that work on the same (big) components

reuse component options without using mixins

When TypeScript support is important

(own opinion)

---

Drawbacks of Composition API

(own opinion)

Overhead of introducing refs

learning curve

---

Consider

No need to rewrite yout vue 2 app

No need to use it in a simple component

(own opinion)

---

Suspense

Renders some fallback content instead of a component until a condition is met

---

Suspense

<Suspense>
  <template #default>
    <UserProfile />
  </template>
  <template>
    <div>Loading...</div>
  </template>
</Suspense>

---

Filters

---

#nofilter

<template>
  <div>{{ amount | dollars }}</div>
</template>

---

#nofilter

<template>
  <div>{{ dollars(amount) }}</div>
</template>

---

No more dilemas

---

Quite some more changes

Fragments

Emits Component Option

create custom renderers

Global mounting API change

...

---

Vue 3 will not break your apps

---

Why upgrade to Vue 3?

Massive performance improvements

Exceptional reusability possibilities

New Features

New design patterns for scale

TypeScript

---

Thanks, Any feedback would be appreciated

Lucky DS Frontend Engineer 085156501865

Tech Stack