Composition API

Composable component with

@mayashavin

Vue Status

State of JS 2020

@mayashavin

Options-based

Lightweight

DX enhancement

Scalable & Performant

https://v2.vuejs.org

@mayashavin

3.x

Functional & Options-based

Lighter-weight

DX enhancement

Scalable & Performant

https://v3.vuejs.org

Better TypeScript support

Better tree-shakable

@mayashavin

3.x

https://v3.vuejs.org

@mayashavin

A set of low-level APIs to use Vue features outside of Vue component

Composition API

@mayashavin

Another way to write complex component

Composition API

Better reusable code quality

Solve the problems that mixins can't solve

@mayashavin

ref()

defineComponent()

h()

reactive() / watchEffect()

provide() / inject()

computed() / watch()

lifecycle hooks (using with setup)

export default {
 name: 'MyComp',
 provide: {},
 inject: {},
 data() { return { count: 1 } },
 computed: { /*...*/ },
 watch: { /*...*/ },
 methods: {},
 mounted() {}
 render(h) { return h() }
}

import {
 defineComponent,
 h, onMounted,
 ref, computed, watch,
 provide, inject
} from 'vue'

export default defineComponent({
 name: 'MyComp',
 methods: {},
 setup(props, context) {
  const name = ref('maya')  
  onMounted(() => { /*...*/ })  
  provide('someProvider', {})  
  const injectValue = inject('someInjector')  
  watch(name, (newValue) => {})  
  const msg = computed(
   () => `hi ${name.value}`
  )
  
  return () => h(
   'div', 
   [name, injectValue, msg]
  )
 },
})

readonly()

@mayashavin

Immutable state

readonly()

watchEffect(
  onInvalidate => {}, options
)

Apply side-effect based on reactive state

@mayashavin

beforeCreate

created

beforeMount

mounted

beforeUpdate

Lifecycle Hooks with setup()

updated

beforeDestroy

destroyed

errorCaptured

Vue 2.x

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

errorCaptured

renderTracked

renderTriggered

Vue 3.x

onBeforeMount

onBeforeUpdate

onMounted

onUpdated

onUnmounted

onBeforeUnmount

onErrorCaptured

onRenderTracked

onRenderTriggered

@mayashavin

What's next?

Use Vite instead of Webpack

Migration tools in Q1 (hopefully) for simple components

Vuex 5 (haven't we all upgraded to Vuex 4 😆 ?)

Migration to Vue Router

Ditch IE11 finally!

@mayashavin

console.log(Maya)

Senior Frontend Developer

Core maintainer of StorefrontUI

NuxtJS Ambassador

Everything about Frontend/Web

https://mayashavin.com

@mayashavin

THANK YOU!

@mayashavin