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

Made with Slides.com