Vue months ago (if you get the pun, though), Vue.js teams had sent out their newest Vue Function Components. Although it is said to still be under RFC on their github page, it is still worth the time to check. As stated on their docs, the Vue Function was certainly inspired by React Hooks API however with Vue’s very own reactivity system.
Which then for some of Vue frequent users might not be a satisfying update, as Vue is sure known for is simplicity and its neat partition on their scaffold.
The craze is whether or not, when you update, you have you rewrite all of your code, like in Angular 2?
Yup! That ain’t happening. Vue 2 will still be fully fine (: By this far, I believe that you should be familiar with the Vue 2.x environment. This article will preview some basic changes and comparisons. We are going to create a Fox Fetching site that has a getFox button and an increment number button.
Before going to the function API, we’re going to start from creating a new Vue Project. On my github in the branch vue-2x I upped a simple code without the Vue Function API. You may start your own vue create client.
Our Home.vue as a Class based
With one component Fox.vue
Let’s start!
First, we need to install the api to our previously created Vue client.
npm install vue-function-api --saveThen, we’re going to add this to our router.js file :
import { plugin } from 'vue-function-api
Vue.use(plugin)Then, to our Home.vue we are going to first import few functions from the api. We’re going to use basic functions for this tutorial :
import { value, computed, watch, onCreated } from "vue-function-api";Vue functions now will wrap its exported datas such as methods, watchers, computed properties and data in Vue 2.x in a function called setup(props, ctx) {…}. But to import components, you still need to import it outside the setup function.
Other than that you must remember to return the setup() function with an object listing all the variables used inside setup.
Adding Data Values
Adding data values is much simpler with Vue 3.x.
It is nice to remember that upon calling these data we don’t need to use this anymore since they’re already in one scope. If you’re familiar with React Hooks API then this is similar to how they work.
Creating Methods + Computed & Watch
Methods are created inside the setup() function, by saving it into a const. The same goes with a computed property. Computed property receives a callback of the computed data.
Watchers in Vue 3.0 is an imported function which receive two parameters. First the getter and a callback for the desired outcome. It will watch the first argument, and do something on the second argument.
Lifecyles
The new lifecycle inside Vue Function are called using the “on..” prefix. Such as onCreated, onMounted etc. These functions receive a callback of the desired outcome.
Full Code
Or you can go to my github page on the brach Vue 3.x.
I guess that has covered most of the basics changes! Their docs (that are still on RFC) are good so if you need more coverage you can always dig them. Again, Vue 3.0 has backward compatibility means that the old one would not be deprecated and you should not suddenly change all of your code. Have great day.!
