What to Expect

A Bit About Me

Among the first members of Vue core team
Not a JavaScript or front-end developer by profession
Living and working in Munich, Germany 🍻
Open-sourcerer

v2.6.10 ( released March 20, 2019)
333KB full development, 30.30KB minified+gzipped
1,010,596 npm weekly downloads
146,015 GitHub stars (2nd in JavaScript, 3rd overall)
3,034 commits, 279 contributors
20 active core members in 11 countries, 6 core team emeriti, 31 community partners

The Numbers Til' Now*

* as of Aug 7, 2019

Things Will Continue to Work

Template syntax will remain 99% the same
Most changes are additive
Mixins will still be there (but there's a better option!)
Yes, even filters!
Migration helper and guide are planned

A Better Core

Organized into sub-packages
Written from scratch in TypeScript
Better type information
Better editor/IDE support with Vetur
TS knowledge required for core contribution

No More Caveats

Object property addition/deletion and direct array item mutation can't be observed in v2.x 🔗
Vue 3 using Proxy = no more caveats
A compat build with Object.definiteProperty will be available for unsupported browsers (IE11)

Smaller Size

Tree-shakeable by design

// 2.x

import Vue from 'vue'

Vue.nextTick(() => {})

const reactiveObject = Vue.observable({})

// 3.0

import { nextTick, observable } from 'vue'

nextTick(() => {})

const reactiveObject = observable({})

Affected public APIs: Vue.nextTick, Vue.observable, Vue.version, Vue.compile, Vue.set, Vue.delete
Internal helpers (transition, slot…) will also be optional
Paves way for more features in the future

Portals

Allow rendering DOM outside of a component (i.e. anywhere on a page)
Currently supported via a semi-official plugin (portal-vue) 🔗
Great for legacy or cross-framework applications

Fragments

Allows returning multiple root nodes from a component
Implicit declaration syntax
Useful when dealing with a list of children ( td, li) and/or for better semantic

<template>
  <div class="wrapper">
    <p>An element</p>
    <slot>A slot</slot>
    <FooComponent />
  </div>
</template>

<script>
export default {
  components: {
    FooComponent: () => import('@/components/Foo')
  }
}
</script>

<template>
  <p>An element</p>
  <slot>A slot</slot>
  <FooComponent />
</template>

<script>
export default {
  components: {
    FooComponent: () => import('@/components/Foo')
  }
}
</script>

New Template Compilation Strategy

Templates are divided into dynamic blocks ( if/else, for, slot)
Each block only needs a single flat array to track dynamic nodes
Update performance is determined by the amount of dynamic content instead of total template size
Watch Evan's keynote @Laracon 2019 for more details

Function-based API

Arguably the biggest, most controversial change ever introduced

Demo 🔗
Again, purely additive!
Code organized by feature instead of options
Encapsulation & component composition
Full TS support
Better compression / minification
Final syntax still TBC
A converter(s) might be available

Miscellaneous Proposals

Implicit attribute fall-through removal 🔗
Optional props declaration (this.$props)
Render function API change
Functional components now only written as plain functions
Async component creation to be explicit
More on https://github.com/vuejs/rfcs
Subject to change!

Documentation Overhaul

Vuejs.org to be moved to VuePress
Weekly meeting & catchup
Collaboration on Notion.so
Upcoming annual sprint being planned

That's a Wrap!

github.com/phanan

twitter.com/notphanan

phanan.net

Vue 3 – What to Expect

By Phan An

Vue 3 – What to Expect

What to expect in the next major version of Vue

1,894

Phan An