🔥HOT🔥✨New✨

Vue 3 Features

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

Slides:

https://slides.com/fimion/connect-tech-2021

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)

https://v3.vuejs.org/guide/migration/migration-build.html

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.

https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

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.

https://v3.vuejs.org/api/directives.html#v-memo

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?

Slides:

https://slides.com/fimion/connect-tech-2021

Demos:
https://codepen.io/collection/mrPZvv

 

Twitter: @fimion - Blog: Alex.Party - Github: fimion