Vue Setup Computed

Posted on  by admin

Vue introduces Composition API (Function-based API) as an addition to current Options-based API. The API will be released with Vue 3, but now you can try it with Vue 3 Composition API added to your Vue 2 app.

🔗Defining Components

In this tutorial, we’re gonna show you:. New Vue Composition API overview and comparison with classic Vue Options-based API.

Examples to implement a Vue Component with new API: props, data, watchers, lifecycle hooks. Example to take advantage of new Vue 3 Composition API (function-based API): split Topics into Functions. Related Posts: – Vue v-slot tutorial with examples – Vue 3 CRUD example with Axios & Vue Router – Vue 3 Authentication with JWT, Vuex, Axios and Vue Router.

Vue Composition API examples. Everything will still work as it works before. Almost things don’t change:.

Template syntax.

Use Vue 3 Composition API in current Vue 2 project

Reactivity system. Concepts of computed properties, watchers & component lifecycle. Progressive nature of Vue framework. The difference of current Options-based API concept vs new Composition API (Function-based API) concept is the way we think of what a component contains:.

Options-based API: A component contains types of properties/methods/options. Composition API: A component encapsulates logical topics into functions.

🔗Other Features

Component options could become complicated to be organized and hard to maintain (monster component).

Vue Composition API Computed Values

A logical topic could involve properties in props and data(), some methods, a certain hook (beforeMount/ mounted), and a watcher in watch. Hence one single topic will be fragmented across multiple options.

With Composition API, every function, which is a part of the big component, encapsulates all the code related to the logical topic (properties, methods, hooks, watchers).

Vue Composition API Watchers

Now that smaller code (function) can be reused, and well-organized.

Implicit return

We can use new Vue 3 Composition API in our current Vue 2.x project by installing @vue/composition-api module.

It is so easy, just run the command:. Then import it in main.js. setup() is the new component option that we will use new Vue Composition API to setup the logic (logical topics) of the component.

If setup() function becomes complex, we can easily split it into multiple functions with corresponding to logical topics. When setup() is called? It is called after props resolution, when an instance of the component is created.

Now look at the Vue component with setup() function:. The function has 2 arguments: – props – context. context has properties (attrs, slots, emit, parent, root) that are corresponding to this.$attrs, this.$slots, this.$emit, this.$parent, this.$root.

We can also destructure them with the latest values even after updates:. *Note:this keyword is not available inside setup() function.

Encapsulate logical Topics into Functions

So this.$emit cannot be used like this:. To get a reference to an element or component instance in the template, we use ref API so that setup() can return reactive and mutable object for render context.

defineEmits

ref automatically unwraps to the inner value, so we don’t need to append .value in the template: {{ name }} is enough, not {{ name.value }}.

  • In this section, we’re gonna show you examples that use new API along with old Vue2 options-based API syntax.

  • Vue2 options-based API syntax:.

  • Vue 3 Composition API syntax:.

With new computed API, we can create a writable ref object with get and set functions.

Vue Composition API Lifecycle Hooks

This is how we use Vue2 options-based API syntax:. Like watch option, we can use new Vue watch API to perform side effect everytime a state is changed.

  • The syntax is: watch(source, callback, options). source: could be a getter function, a value wrapper, or an array containing the two above types (in case of watching multiple sources).

  • callback: is the function like Vue2 watcher handler function, with 2 arguments: newVal, oldVal.

  • Each argument could be an array (for watching multiple sources): [newVal1, newVal2, ..

Now, we can import these methods

newValN], [oldVal1, oldVal2, .. options (optional): is used for configuring watcher type containing: lazy, deep, flush.

Source Code

For more details about WatchOption, please visit: api#watch. In case we want to watch multiple sources:.

We can also split the multiple sources watcher into smaller watchers. This helps us organize our code and create watchers with distinct options:.

With Vue2, we implement Lifecycle Hooks functions by this way:. New Vue 3 Composition API has equivalent functions, we can use those with on prefix inside setup() function:.

You can see the mapping between Lifecycle Vue2 Options and Composition API in the following table:.

It's this easy to make an async setup()

Now we combine all code above into one Vue Component, you can see a complex component with multiple topics.

We need to implement logic for title, for todo, for items:.

Not the answer you're looking for? Browse other questions tagged vue.jsvuejs3vue-composition-apivue-script-setup or ask your own question.

It comes time to take advantage of Vue Composition API: split complex component into multiple functions with corresponding to logical topics:. It works like a charm.

We can easily view each topic by its own function.

  • Each topic has its own props, data, watchers, methods.

  • Our component now only need to inject these functions and return them inside its setup() function.

Maybe you feel comfortable when using the old Vue options-based API, or maybe you don’t like to think of everything as functions but properties/methods with OOP mindset.

Using