Composition API
Composable component with
Vue Status
Options-based
Lightweight
DX enhancement
Scalable & Performant
3.x
Functional & Options-based
Lighter-weight
DX enhancement
Scalable & Performant
Better TypeScript support
Better tree-shakable
3.x
A set of low-level APIs to use Vue features outside of Vue component
Composition API
Another way to write complex component
Composition API
Better reusable code quality
Solve the problems that mixins can't solve
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()
Immutable state
readonly()
watchEffect(
onInvalidate => {}, options
)
Apply side-effect based on reactive state
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
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!
console.log(Maya)
Senior Frontend Developer
Core maintainer of StorefrontUI
NuxtJS Ambassador
Everything about Frontend/Web
THANK YOU!
Compose component with Composition API
By Maya Shavin
