Vue Composition Api Props

Posted on  by admin

In this Vue tutorial we learn a different way to write component logic with the Composition API. We cover how to move to the new setup option and how to replace options from the Options API with their new function counterparts.

Replacing the data option with ref(). Replacing the watch option with watch(). If you want to follow along with the examples, you will need to create an app generated by the Vue CLI. As mentioned in the Vue API lesson, the Composition API combines all of a component’s data and functionality into a single section. Instead of separating our code into different options likedata,methods,computedetc. we now use only thesetupoption. The Composition API’s only focus is changing how the data, methods, watchers and computed options of a component can be written differently. Instead of using separate options, they are now bundled into a newsetupoption.

The option takes a function as a value, so we can use the ES6 shorthand syntax and simply write it assetup(). Vue executes the function before the component is created, before any lifecycle hooks.

As an example, let’s log a message to the console insetup, as well as thecreatedandmountedhooks.

The console output from the example above shows the order of execution.

noteBecause setup is called so early in the lifecycle, the component hasn’t been initialized yet and this doesn’t reference the config object like we’re used to. We don’t use this in the setup option.


Thesetupoption takes two optional arguments. Data that’s passed down from a parent component. A Javascript object that exposes 3 different component properties. To access data from the function in the components template, we return that data at the end of the setup option as an object (like we did with the data option).

When a key has the same name as its value, we can use the ES6 shorthand syntax. noteThe data we returned above is not automatically reactive like it is in the data option.

We have to manually do it with reactive refs. If we want to make our returned data reactive, we use thereffunction. The function is imported from the ‘vue’ package and takes the data we want to make reactive as an argument.


If we want the data to be available in the template, we have to return thereffrom thesetupoption (like we do with thedataoption). If we want to access the value of arefinside thesetupoption, we have to use thevalueproperty. As an example, let’s create arefwith a simple greeting message that we return and output in the template.

We’ll also access the value in a timer inside setup and change its value after 3 seconds. Arefdoesn’t have to be a primitive value, like a string or a number. We can use objects as well. If we want to access it insidesetup, we have to use thevalueproperty again, followed by the object’s key. If we expose the object’s properties outside of the setup option, they lose their reactivity.

They will display fine in the template, but they won’t update when the timer executes. We have to expose the whole object, not the separate properties.

As mentioned earlier,refcreates a wrapper object when we pass single primitive values to it. In Javascript, primitives are passed by value, not by reference.

Wrapping values in an object helps keep the behavior unified across different data types.