Reactivity in Vue 3
Reactivity is a programming technique that implies reacting to the changes in a declarative manner and this has transformed the way modern web and mobile applications are built.
Like its competitors such as React, and Angular, the reactivity system is one of the significant features of Vue.js. As the name suggests, at a very high level, it is related to reacting to the component’s data/state changes and updating views dynamically. When any of the data of the component’s state changes, it updates the view by re-rendering with the latest changes.
This blog aims to give you a high-level overview of how to implement reactivity system in Vue 3 using Options and Composition API.
Glance at Options and Composition API
There has been a lot of discussion about Options API vs Composition API since Composition API was introduced as part of Vue 3. So before we start with the reactivity system, let’s understand Options and Composition APIs.
Options API
Options API is a traditional way of declaring components in Vue.js. It consists of building blocks such as data, methods, computed properties, props etc. Options API is easy and simple to understand and is a good choice for beginners. However, it could lead to spaghetti code and fragmentation as codebase and complexity increase. Also, it does not provide reusability unlike the Composition API.
Given below is the example of the structure of the Options API.
Composition API
Composition API is a newer way of declaring Vue component introduced in Vue 3 to address the shortcomings of Options API. In the Composition API, everything from component data to methods to computed properties is declared in the setup hook. The main advantage of the Composition API is that you can abstract the functionality into its components. It can be reused in different components using a concept called Composable. Composable is a function that leverages Composition API and encapsulates stateful logic which then can be re-used in different Vue components. Here is the official documentation of the Composable https://vuejs.org/guide/reusability/composables.
The use cases of Composables are mainly renderless components (components without a template) from functional utilities to API handlers to fetch data, process and return with data and/or errors if any.
Given below is an example of the structure of the Composition API.
Here is the quick comparison between both the APIs
Reactivity using Options API
In Options API, all the properties declared under the data functions are reactive by default. Vue calls the data function while creating a component instance and makes all the properties reactive. However, unlike Vue 2 reactivity, the Vue 3 reactivity system uses Javascript proxies under the hood to create a reactive state of the component.
When declaring reactive properties to the component, make sure to declare those in the data function as those properties are added only when an instance gets created for the first time. You can still add the instance properties to the component outside of the data function but those properties won’t be able to trigger reactive updates.
For example, Let’s say we have a component ComponentA that uses options API and we have 3 instance properties declared. And we are rendering the title.
Initially, this will display Default title. Now when a user clicks on the button, it will update the instance property as you can see in the above screenshot and it re-renders the view dynamically. So now, the component would render Title A instead.
Vue also supports deep reactivity which means, in case of mutating nested objects or arrays, it will also trigger reactive updates.
Now, when a user clicks Update the suburb button, it should update the DOM with Suburb B.
This is a high-level overview of the reactivity in Vue 3 using Options API. To explore more about reactivity using options API, please refer to this documentation https://vuejs.org/guide/essentials/reactivity-fundamentals.html (and make sure to select Options API from toggle).
Reactivity using Composition API
You can declare reactivity in 2 ways: Ref() and Reactive() functions. The following section explains how to declare reactive values using both the ways and its limitations below.
Ref() function
You can declare reactive variables using the ref() function which takes a value as an argument and returns the Ref object where a value that is passed in as an argument gets wrapped with value object. As you can see in the example given below, the variable count is a reactive variable and then you can return it from the component so that templates can refer to those for rendering.
However, as you noticed, there is no need to refer to the variable count using .value in template syntax as Vue unpacks the value while rendering.
You can also update the reactive variable and to mutate the variable, you need to declare a function as part of the setup function and return that function just like a reactive variable.
As you can see in the below example, the increment function is defined in a top-level setup function and is returned so that the template can access it for event-handling purposes etc.
Under the hood, a dependency-based tracking reactivity system makes reactivity work where it creates tracks of every reactive variable at the time of first render and when any of the variables mutate, it triggers the re-rendering of part of the component that is tracking it.
Ref() function also supports deep reactivity where if any of the nested properties of the complex structures such as an array of objects etc are changed, it triggers re-rendering of the DOM. However, you can opt out of the deep reactivity as well where it would only track .value access using Shallow Ref. More on shallow reactivity can be found here https://vuejs.org/api/reactivity-advanced#shallowref.
Reactive() function
You can also define reactive variables using reactive() function which accepts argument but unlike ref() function where it returns a Ref object, it returns an object that itself is reactive using the proxy method. Hence, while accessing the variable in functions or templates, you do not need to use .value.
As reactive() function uses javascript proxies, it returns the same object when you call the method reactive on the same object or call reactive on the existing proxy.
However, there are a few limitations to using reactive() function
- You can use
reactive()only with object types such as object, array, map, and sets but not with primitive types such as number, string etc. - Replacing an existing reactive object would not work as “replace” destroys the reference to the previous reactive object.
- It is not destructure friendly as destructuring primitive values of an object into variables or passing it to function would eliminate reactive linkage.
This is a high-level overview of the reactivity in Vue 3 using Composition API. To explore more about reactivity Composition API, please refer to this documentation https://vuejs.org/guide/essentials/reactivity-fundamentals.html (and make sure to select Composition API from toggle)
Seamlessly Transition with SRC Innovations
Whether you’re looking to migrate from the Options API to the Compositions API or from Vue 2 to Vue 3, remember that SRC Innovations is here to assist you at any time. We have skilled and experienced developers who are more than willing to assist you with these tasks.
Please don’t hesitate to contact us here.
References
- Reactivity Fundamentals: https://vuejs.org/guide/essentials/reactivity-fundamentals.html
- Reactivity in Depth: https://vuejs.org/guide/extras/reactivity-in-depth.html
- Composition API FAQ: https://vuejs.org/guide/extras/composition-api-faq.html
- BBEdit: https://apps.apple.com/au/app/bbedit/id404009241?mt=12
Originally published at https://blog.srcinnovations.com.au on February 26, 2024.
At SRC, we are at the forefront of empowering businesses of all sizes to gain a competitive edge in their industries. Visit our site to learn more about us and get in touch to discover how to transform your business through innovative and tailored technology solutions.
