Let's Welcome

Vue 3!

Let's Welcome

Vue 3!

  • Typescript
  • Proxies
  • Mostly Backwards Compatible
  • Composition Function API

Vue 2 Is currently written in Flow,

a static type checking system from Facebook.

Vue 3 is completely rewritten from the ground up in Typescript.

(This will make the type hints in typescript better for YOU!)

The Vue 2 source is currently is very intertwined.

The Vue 3 source will be more modular.

This is will allow for:

  • Different rendering engines (Server Side, Browser, NativeScript, etc)
  • Tree Shaking (only use the code you need)

Vue 2 has a reactivity based on Object.defineProperty

Vue 3 will have a reactivity system Based around Proxies.

ES6 Proxies

The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).

- Mozilla Developer Network

In other words: Fancy new JavaScript stuff

What's a Proxy?

BUT WHY PROXIES??

Have you ever...?

// Setting an array item by index
Vue.set(this.myArray, index, newValue)

// Adding a new property to an object
Vue.set(this.myObject, key, value)

// Deleting a property from an object
Vue.delete(this.myObject, key)

Vue 2

Well Now....

// Setting an array item by index
Vue.set(this.myArray, index, newValue)

// Adding a new property to an object
Vue.set(this.myObject, key, value)

// Deleting a property from an object
Vue.delete(this.myObject, key)

Vue 2

// Setting an array item by index
this.myArray[index] = newValue

// Adding a new property to an object
this.myObject[key] = value

// Deleting a property from an object
delete this.myObject[key]

Vue 3

Here's the thing though...

Proxies cannot be polyfilled

in Internet Explorer.

Good news!

There will be an option to do a backwards compatible build!

Okay, So let's talk code.

Vue 2 Syntax

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World';
    },
  },
};
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>
<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World';
    },
  },
};
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Vue 2 Syntax

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World';
    },
  },
};
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>
<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World';
    },
  },
};
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Vue 3 Syntax

Most of your components will just work.

Things that will change

  • Filters - removed
  • $listeners will be merged into $attrs

Let's talk about the Composition Function API

A Bit of History

(Or... how i saw it)

  • October 25th, 2018: Dan Abramov demos React Hooks at React Conf

  • October 27th, 2018 12:38 am EST: Evan You Tweets:

WARNING

Vue 3 is in ALPHA as of March 24th, 2020. The API might change before release. 

So what does it look like?

Classic Component

<template>
  <button @click="increment">
    Count is: {{ count }}, double is: {{ double }}
  </button>
</template>

<script>
export default {
  data(){
    return { count: 0};
  },
  computed:{
    double(){
      return this.count * 2;
    },
  },
  methods:{
    increment() {
      this.count++;
    },
  },
};
</script>

Component with reactive 

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    });

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    };
  },
};
</script>

Component with ref 

<template>
  <button @click="increment">
    Count is: {{ count }}, double is: {{ double }}
  </button>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);

    function increment() {
      count.value++
    }

    return {
      count,
      double,
      increment,
    };
  },
};
</script>

Demo!

https://codepen.io/fimion/pen/ZEGqxZB

Why would I want this?

Other Nifty Things!

  • Fragments!
  • Reactive Dependency Injection
  • Portals
  • Suspended Component Rendering

Questions?

Slides: https://slides.com/fimion/lets-welcome-vue-3

More information:

https://madewithvuejs.com/blog/vue-3-roundup