Hello Mr. Vue!
Welcome V3
@bloo_df
/bloodf
/heitorramon
Heitor Ramon
- Father
- HTML "Developer"
- *.IE6{_content:"Hacker";}
- Table time survivor
- Ex Advertising Worker
- DJ
- Took a Professional Magic Course
- Entrepreneur
- Wannabe Game Streamer
- Author of Vue.js 3 Cookbook
Buy it (amzn.to/32KEQw8 | http://bit.ly/2QEUofl)
Agenda
@bloo_df
/bloodf
/heitorramon
Three
Years of
Development
@bloo_df
/bloodf
/heitorramon
2018-2019
- Q1/2018 - First Vue 3 Idea;
- Q3/2018 - Working Prototype;
- Q3/2018 - vue-next repository;
- Q4/2018 - TypeScript, hooks, and more;
- Q1/2019 - New render logic;
- Q2/2019 - Function & Composition API RFC;
- Q3/2019 - New V-Model
- Q4/2019 - Tooling for Vue (SFC & HMR)
2020
- Q1/2020 - V3 Alpha 1
- Q1/2020 - SSR
- Q1/2020 - V3 Beta 1
- Q2/2020 - Vite & Vitepress
- Q2/2020 - V3 RC 1
- Q3/2020 - V3 Release
@bloo_df
/bloodf
/heitorramon
Vue 3
One Piece
@bloo_df
/bloodf
/heitorramon
What is new on this Version?
- TypeScript Internal;
- New Proxy-based reactivity system;
- Compiler-informed Virtual DOM & SSR;
- Full tree-shaking;
- Compile-time flag;
- New Composition API;
- Suspense & Teleport;
- Modularized Internals;
- Custom render engine;
- A lot of love...
@bloo_df
/bloodf
/heitorramon
TypeScript
interface Book {
title: string;
author: string;
year: number;
}
import { defineComponent, reactive } from 'vue';
const Component = defineComponent({
name: 'BookOptionsComponent',
data: () => ({
book: {
title: 'Vue.JS 3 Cookbook',
author: 'Heitor Ramon Ribeiro',
year: 2020,
} as Book
}),
});
// Or
const Component = defineComponent({
name: 'BookCompositionComponent',
setup() {
const book = reactive<Book>({
title: 'Vue.JS 3 Cookbook',
author: 'Heitor Ramon Ribeiro',
year: 2020,
});
}
})Now Vue has first-party TypeScript support on the framework.
Removing the need for plugins and extra tooling to write with it.
@bloo_df
/bloodf
/heitorramon
New Proxy Reactivity
With the V3, Vue has adopted the Proxy-based reactivity system, for the newer browser environment.
Using the Object.defineProperty for the IE11 and old browsers.
This new Proxy enabled the use of the reactivity system as a dependency and a separate package from the Vue core.
// Old Object.assing / Object.defineProperty method
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 });
// New Proxy Based
const dinner = {
meal: 'udon',
}
const handler = {
get(target, prop, receiver) {
track(target, prop);
return Reflect.get(...arguments);
},
set(target, key, value, receiver) {
trigger(target, key);
return Reflect.set(...arguments);
},
};
const proxyDinner = new Proxy(dinner, handler);
console.log(proxyDinner.meal);
@bloo_df
/bloodf
/heitorramon
Compiler-informed Virtual DOM & SSR
The new compiler can watch and change code with minimal effort, without the need to re-render the whole DOM tree.
Full tree-shaking
The new Vue-CLI and Vue-Compiler can look for code that is being used and remove unused code in production build.
Compile-time flag
The new compiler can be used with custom flags that can run on compile-time to change the code, in compilation time, such as real-time translation.
@bloo_df
/bloodf
/heitorramon
Composition API
Inspired by the React Hooks, the new Composition API brings the minimal code re-usage to Vue as a new form of mixin (sort of).
This new API is added to the Vue component API, and improves the readability and re-usability of your code.
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const double = computed(() => count.value * 2)
function increment() {
count.value += 1;
}
return {
count,
double,
increment
};
}
}
@bloo_df
/bloodf
/heitorramon
Suspense Component
A new component is included in Vue 3, that helps the render of async content.
The Suspense component wraps a component that has an async lifecycle, and when it's not ready renders the #fallback slot.
You can add an error handler to improve the usability and add an error component to this mix.
<template>
<div v-if="error">
{{ error }}
</div>
<Suspense v-else>
<template #default>
<UserProfile />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
<script>
import { onErrorCaptured } from 'vue';
setup () {
const error = ref(null);
onErrorCaptured((e) => {
error.value = (e)
return true;
})}
return { error };
</script>
@bloo_df
/bloodf
/heitorramon
Teleport Component
Imagine writing a code on a component, and rendering it on another component.
With the new Teleport component, you are able to control how the render of your code will be displayed.
Is like a teleport gun, but on your Vue application.
const app = Vue.createApp({
template: `
<h1>Root instance</h1>
<parent-component />
`
})
app.component(
'parent-component',
{
template: `
<h2>This is a parent component</h2>
<teleport to="#endofbody">
<child-component name="John" />
</teleport>
`
})
app.component(
'child-component',
{
props: ['name'],
template: `
<div>
Hello, {{ name }}
</div>
`
})
@bloo_df
/bloodf
/heitorramon
Modularizated Internals & Custom Render
Do you want to use just the reactivity of Vue? Create just a component without the need of the refs? With the new building system, Vue was split into micro packages that enable it.
Imagine writing Vue with a render engine for WebGL, Smartphone Native, Desktop Native, CLI, or Game platforms. Now you can replace the Vue render engine.
@bloo_df
/bloodf
/heitorramon
Buy it (amzn.to/32KEQw8 | http://bit.ly/2QEUofl)
Discount Coupon 25VUEJ
Vue.js 3 Cookbook
@bloo_df
/bloodf
/heitorramon
Hello, Mr. Vue! Welcome V3
By Heitor Ramon Ribeiro
