Introduction
Prerequisite is basic knowledge of HTML, CSS, js ES6, and Vuejs
Project Setup
- Prerequisite are Git, Nodejs
- Clone the project at github.com/netlify/explorers-composition-api
What is a Composition API?
Need is to share and write more flexible API in Vue.js => The Composition API is another way to build Vue.js apps and organize your code.
Options API is split in 3 sections, data, computed, and methods trade-off:
- more verbose and less structure
- more js knowledge needed
- deeper understanding of Vue.js is required to use it
- architecture decisions are up to you
Setup method with props and ctx variable ctx is composed with attrs, slots and emit
2 part of the method
- data and computation part
- return part
Reactive Data
Use helper method
- ref method will make a property being tracked by Vue.js
- use the prop.value to access the value
- reactive method to declare props inside a const state and use state.count to access value
- use the toRefs method to destructure the state in the return part ( ...state) to access directly to the const in the template
pair programming challenge
Computed Properties
use computed method to return the computed property
pair programming challenge
Methods
every method become a const arrow function and need to be added to the return block
pair programming challenge
Lifecycle Hooks
mounted become onMounted with a callback function and set the value of state.count
Watch
with reactive state
- for a value :: watch(() => state.count, ...
- for a list :: watch(() => [..state.list], ...
with a ref
- for a value :: watch(() =>count, …
- for a list :: watch(() => [...list.value], …
pair programming challenge
Next steps
don’t rewrite all the API choose when use one and the other
for more practice complete the meteor challenge branch fix broken tasks which are commented in components reconfigure the entire app to use Composition API
and deploy it on netlify with “npm run build” command and “dist” for Publish directory