{"id":5529,"date":"2022-12-18T11:00:34","date_gmt":"2022-12-18T11:00:34","guid":{"rendered":"https:\/\/tuvoc.com\/?p=5529"},"modified":"2024-11-05T09:44:21","modified_gmt":"2024-11-05T09:44:21","slug":"reactivity-vue-2-vs-vue-3","status":"publish","type":"post","link":"https:\/\/www.tuvoc.com\/blog\/reactivity-vue-2-vs-vue-3\/","title":{"rendered":"Reactivity Vue 2 vs Vue 3"},"content":{"rendered":"

Reactivity has to be one of the most stand-out features of Vue. The feature allows this JavaScript framework<\/a><\/strong> to build interactive user interfaces for their front end, and the best part is, you don’t have to understand how it works, for it to work!<\/span><\/p>\n

\n
\n
\n
\n

But if you are looking into more advanced Vue development, getting into features like the Composition API and understanding how reactivity works behind the curtains will help a lot. Today, we will explore the reactivity and compare the reactivity in Vue 2 vs. Vue 3. If you\u2019re interested in leveraging these advancements, make sure to hire Vue JS developers India<\/strong><\/a> for their expertise and skills.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

What Is Reactivity?<\/span><\/h2>\n

Reactivity is a programming pattern that allows the adjustment to the changes in a declarative manner. Here is how it offers a magic function, with a quick example.<\/span><\/p>\n

Suppose you are working on an excel sheet that looks something like this:<\/span><\/p>\n\n\n\n\n\n\n
<\/td>\nA<\/b><\/td>\n<\/tr>\n
1<\/b><\/td>\n5<\/span><\/td>\n<\/tr>\n
2<\/b><\/td>\n3<\/span><\/td>\n<\/tr>\n
3<\/b><\/td>\n8<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Now, the A3 cell is defined by the function A1+A2. When you change the values in A1 and A2, the values in A3 will change automatically.<\/span><\/p>\n

The caveat here is, that this does not happen in vanilla JavaScript.<\/span><\/p>\n

If the variables in JavaScript are defined as 1 and 2, the A3 will give you an output of 3. However, if the values of A1 and A2 are changed, the A3 will not change automatically.<\/span><\/p>\n

You will need to use the update function. The need here would be to invoke update(), whenever the dependencies (A1 and A2) are changed.<\/span><\/p>\n

whenDepsChange(update) will do the job for you. It will track the variable reading. When evaluating A1+A2, it will read both A1 and A2. Since both of them are read when update() is executed, the update() is subscribed to both A1 and A2 after the first call.<\/span><\/p>\n

Here, when a value is changed in A1 and A2, the re-run will occur by notifying all the subscribers to implement the change in the value.<\/span><\/p>\n

How does this help you with Vue and reactivity? Let’s find out.<\/span><\/p>\n

How Does Reactivity Work In Vue?<\/span><\/h2>\n

In development, it would be impossible to track the reading and writing of local variables as we did in the example above. However, if we intercept the reading and writing of object properties, that can be done.<\/span><\/p>\n

With getter\/setters and Proxies, property access can be intercepted. Vue 2 uses getter\/setter as there are browser support limitations. Vue 3, on the other hand, uses getter\/setters for the refs and Proxies for reactive objects.\u00a0<\/span><\/p>\n

If you are working with the data property ‘message’ in the Vue component, and you are rendering this message in the view with text interpolation like this,<\/span><\/p>\n\n\n\n
Vue.component(“my-component”, {<\/span><\/p>\n

\u00a0\u00a0data: {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0message: “Hello, world”<\/span><\/p>\n

\u00a0\u00a0},<\/span><\/p>\n

\u00a0\u00a0template: “<p>{{ message }}<\/p>”<\/span><\/p>\n

});<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

You will see <p>Hello, world<\/p> when the app instantiates. But if you modify the message in the app lifecycle like this:<\/span><\/p>\n\n\n\n
methods: {<\/span><\/p>\n

\u00a0\u00a0updateMessage () {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.message = “Goodbye, world”;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

}<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Here, Vue will update your message automatically as <p>Goodbye, world<\/p>. Once again, changing the dependencies will affect the outcome in the desired way, as we discussed earlier.<\/span><\/p>\n

This is just one example of reactivity in Vue, but with the right understanding, the possibilities are endless. This can be applied for updates in DOM, calculations of a computed property, and other custom functionalities.<\/span><\/p>\n

Vue 2 Reactivity<\/span><\/h2>\n

The reactivity in Vue 2 works by walking through each property, component prop, computed property, and everything that the user has declared on getters and setters, which will trigger the desired side effect when the dependencies are modified.\u00a0<\/span><\/p>\n

For example, let\u2019s explore this Vue component.<\/span><\/p>\n\n\n\n
const data = {<\/span><\/p>\n

\u00a0\u00a0id: 1,<\/span><\/p>\n

\u00a0\u00a0name: “X Item”,<\/span><\/p>\n

\u00a0\u00a0price: 999<\/span><\/p>\n

}<\/span><\/p>\n

Vue.component(“X-item”, { data });<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Here, the data object would be walked through. The getters and setters will be added automatically, the ones who are responsible for reactivity.<\/span><\/p>\n

This is how the data object of the component will look at the runtime:<\/span><\/p>\n\n\n\n
\n