From	Send To	Note	Action
{{note.from}}	{{note.sendTo}}	{{note.note}}

> **"What I Have Learned So Far" Edition also known as sequence of series that i am personally developing for my writing routine. Originated from certain topic or reading material lately that I enjoy, cheers 🥂.** After following some news about vue lately, My eyes 👀 caught by the new interesting thing that will come and which is a major update from Vue 2 to Vue 3 expected release in mid to end term this year. One of the significant transformations is in the new alternative code structure from the options API (previous way) and then the composition API (new optional way). | Options API | Composition API | | ------------- |:-------------:| | - Intuitive and easy to get started with | - Provides more flexible code organization & logic reuse capabilities | | - Scalability issues in large applications | - Can be use alongside options API | Then here are some reasons and a comparison between composition and options according to Evan You (The creator of Vue JS) and the image below shows the different code structures of options and composition API. ![Alt Text](https://user-images.githubusercontent.com/499550/62783026-810e6180-ba89-11e9-8774-e7771c8095d6.png) *original Source : vue-composition-api-rfc.netlify.com (vue-composition-documentation)* ## 1. Getting Started I have used a simple implementation called 📝 refrigerator-note 📝 mainly using [@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) and [vue-cli](https://www.npmjs.com/package/@vue/cli) for this topic and here is the [Github repo](https://github.com/dinulsyah/vue-composition). You can clone it and run several commands like this on your local machine: * *yarn install / npm install* (install the dependency) * *yarn serve / npm run serve* (running the application) The vue2 code structure is placed in the [master](https://github.com/dinulsyah/vue-composition) branch and [composition](https://github.com/dinulsyah/vue-composition/tree/vue-composition) in the api-composition branch and here is a list of existing [users and passwords](https://github.com/dinulsyah/vue-composition/blob/vue-composition/src/users/index.js) if you want to try accessing the [online demo](http://vue-composition.dinulsyah.com/)/local machine lastly don't forget to leave a star for the repo if you like it 🌟 ```javascript // src/main.js import Vue from 'vue' import App from './App.vue' import VueCompositionApi from '@vue/composition-api' import Miligram from 'milligram' import Vmodal from 'vue-js-modal' Vue.config.productionTip = false Vue.use(VueCompositionApi) Vue.use(Miligram) Vue.use(Vmodal) new Vue({ render: h => h(App), }).$mount('#app') ``` ## 2. Setup The composition API requires a setup initialization that will return an object that wraps state, methods, computed, watch , etc to expose this variables/functions to the templating Vue. And also note that ***this*** statement cannot be used in the setup. ```vue // src/components/RefrigeratorLoginForm.vue // Vue 2 Structure // Vue Composition Structure ``` ## 3. Local/Component State In the composition API, there are two ways to explicitly initiate a local state with **ref** or **reactive** that observe for each state change, the ref takes parameters without being wrapped into an object while reactive uses the object data type and assign a specific key. These two are optional but there are some differences in where to access the ref state in the setup function with the *variablename.value* and the *variablename* in the Vue template. Whereas reactive is also accessed by the assign key name in the setup and the template so it kind of makes senses in my opinion. ```vue // src/components/RefrigeratorNoteForm.vue // Vue 2 Structure // Vue Composition Structure ``` ## 4. Methods, Computed, Props, Watch, LifeCycle Hooks The **Methods** written as a usual function in Javascript While **Computed** calling Computed from Vue-Composition then passing a function as parameters stored the expected result in a variable that implicitly has been observed by Vue so that to access it we need to use *variablename.value*. **Props**, Same as a previous structure in Vue 2 but props are received from the first parameter setup function. Importing **OnMounted**(Life Cycle Hooks) and **Watch** from composition-API then like Vue 2 for onMounted are called when the template has been rendered and we can access data, components, global objects, etc. While Watch will be called if there is a change in the watch state and then perform a logical process by passing again a function on OnMounted or Watch. ```vue // src/App.vue // Vue 2 Structure // Vue Composition Structure ``` ## 5. Structure and Use Composable Vue composition supports the code structure for better readability and ease of maintenance in my opinion, we can also use the composable function to group domains separately in files and then call them or combine them with other composable functions. ```js // src/cmp-fun/ListNoteTable.js export default function(props){ const toAddNote = () => { props.toSection({section:'on-login'}) } const deleteList = (index) => { props.deleteNote(index) } return { toAddNote, deleteList } } ``` ```vue // src/components/ListNoteTable.vue ``` ## 6. Accessing Plugin through Context Due to not being able to access ***this*** statement on the Vue composition, one way to access global object or plugins that we usually use like ***this.$modal*** is with the params context in the second parameter and then in the setup function and call it like so ***context.root.$modal***. ```vue // src/App.vue ``` *Vue Composition in Vue 3 later remains a choice that is not mandatory but also intended to tackle the problem for large scale application scalability and maintainability with long maintenance and life span.Another interesting thing denoted that the composition/options API can be used together according to the desired requirements. So are you impatient to anticipate the release of Vue 3 or other great things coming from Vue ?*

Send Your Note

Send Your Note

List Of Notes

dinulsyah

What I Have Learned So Far about 'Vue-Composition-API'

Join Our Newsletter. No Spam, Only the good stuff.