🔥HOT🔥✨New✨

Vue 3 Features

(I definitely did not just copy and paste the changelog.)

Alex Riviere

  • Senior Frontend Developer at Traina Design
  • Enjoy the Vue Co-host
  • Atlanta Vue.js Co-Organizer

3.0.0

(Released 2020-09-18)

3.0.0

(Released 2020-09-18)

  • New Reactivity System using Proxy Objects
  • Composition API and setup method

  • Removal of filters

3.1.0

(Released 2021-06-07)

3.1.0

Migration Build

  • @vue/compat to help you migrate your app
    from to Vue 3
  • Gives lots of Errors and warnings
    that will be relevant to getting you up to date

(Released 2021-06-07)

3.1.0

(Released 2021-06-07)

Component level compilerOptions

Lets you adjust your vue compiler settings on a per component basis

🔥3.2.0🔥

(Released 2021-08-09)

3.2.0

(Released 2021-08-09)

  • v-bind in style block
  • v-memo
  • effectScope
  • defineCustomElement
  • script setup syntax

3.2.0

(Released 2021-08-09)

v-bind in style block

3.2.0

(Released 2021-08-09)

v-bind in style block

  • Injects a CSS Custom Property into CSS for component
  • Vue updates the custom property in the style attribute.

3.2.0

(Released 2021-08-09)

v-memo

3.2.0

(Released 2021-08-09)

v-memo

  • Gives more control over when to render
  • works with v-for loops
  • You probably shouldn't use this.

3.2.0

(Released 2021-08-09)

effectScope

  • Used to create a local scope for things like
    computed, watch, and watchEffect
  • Allows you to stop multiple effects at once.
  • Also adds getCurrentScope and onScopeDispose helpers.
  • You probably won't use this.

3.2.0

(Released 2021-08-09)

defineCustomElement

  • Vue components can be turned into
    native customElement
  • Usable without a vue app

3.2.0

(Released 2021-08-09)

defineCustomElement

3.2.0

(Released 2021-08-09)

defineCustomElement

Caveats

  • Cannot use scoped slots.
  • Provide/Inject only works with other custom elements
  • Has a 16kb overhead for Vue reactivity 

3.2.0

(Released 2021-08-09)

script setup

  • A new way to write Composition API SFC
  • Compile time only
  • Looks kinda like a svelte component.

3.2.0

(Released 2021-08-09)

WITHOUT script setup syntax

3.2.0

(Released 2021-08-09)

WITH script setup syntax

3.2.0

(Released 2021-08-09)

script setup syntax

Adds defineProps, defineEmits, and defineExpose as compile time directives

Thank YOU!

Questions?