DEV Community: Aman Sharma

Why you should use the key directive in Vue.js with v-for

Aman Sharma — Mon, 08 Jun 2020 17:24:27 +0000

In any web or mobile app, we see lists every day. All those Facebook, Twitter, and Instagram feed we keep scrolling — they are all some form of lists.

Implementing lists in Vue is like a piece of cake, thanks to the v-for directive. It lets you iterate over arrays and objects and represent each element just the way you want.

Here is an example of very basic list rendering in Vue.

Although it is pretty straightforward, there can be some cases where you will end up scratching your head while everything seems to look normal. This may happen if you do not use the :key directive along with the v-for directive. Before I explain further, let me clarify a few things that will help you understand the bug and it's solution better.

Application state and DOM state

To understand the bug, we need to know the distinction between an application state and a temporary DOM state. Let us look at an example.

Here, I have created a list of tweets with input boxes where you can comment on the tweet (the comment box is a dummy created for illustration).

In the example above, a tweet-box component is displaying its information from the data that is provided to the component as an array of tweets. This part is rendering data directly from the application state (the tweets array).

The other part of the component tweet-box is an input box, which is not tied to any data within the Vue instance and hence is independent of the application state. So, if you type something into the comment box and leave it right there, the text that you just entered is stored temporarily into the DOM state.

In-place patch strategy

By now, we have seen simple rendering lists in Vue.js, and also have seen the distinction between application state and DOM state. Now we need to understand something called "in-place patch strategy" that Vue uses to render lists.

Vue's documentation describes, "If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index." Let's dig deeper.

Vue renders lists in such a way that whenever there are dynamic changes in the UI, for example, the order of the list changes, Vue will just update the data in the DOM of each element of that list. Instead of moving HTML chunks of each element of that list, Vue will just update the current application state into the DOM, by updating the DOM element's state.

This shows Vue prefers to reuse as much of the DOM as it can and try to make the manipulations at the data level and not at the DOM level. This way Vue improves the performance overall but, this can cause issues when there are such dynamic changes in UI, and the data of the DOM elements are dependent on child components or temporary DOM state. This behavior is well explained in the next section.

Updating the order of elements

By now we know that if there is a change in the order of list elements, then Vue will opt to change the data of those elements rather than moving the order of those DOM elements.

So, to see that in action, I have added a Shuffle button in the previous Tweets example. Whenever I click the shuffle button, the order of the tweets changes, just as we talked. You can try it for yourself here,

But here, is something that I want you to see in order to understand the problem that we talked about earlier.

Let's just write a comment in the any of the tweet's comment box, and then click Shuffle button.

You can see, that the comment that I wrote for a certain tweet will not move according to the shuffling of the tweets.

Why does this happen?

Quick answer: in-place patch strategy.

The comment belongs to the temporary DOM state, which basically means it belongs to the DOM and is not bound to any data that Vue recognizes. We already know that when the order of elements change in Vue, only the data of those elements changes in the DOM, and not the DOM elements itself. You can actually see that happening here.

To explain the scenario better, let's say we have two elements in a list, X and Y, and each of these elements have some data in their temporary DOM state. Now, if we shuffle the order of X and Y, then the changes will only reflect in the part of DOM which is bound to X and Y.

This happens because Vue has no way to bind whatever is in the DOM state of an element, to the application state of that element.

So, let's see how that can be solved.

Solution (Using the `:key` attribute)

The only solution to this kind of a problem is to add the :key attribute with v-for like this,

We have to assign a unique id of some sort to each element of the list. In this case, we are assigning some id to each tweet, and it is unique. Here is the same example of tweets, after applying the :key attribute,

Let's try to write a comment and shuffle again.

Now, you can clearly see that on shuffling, the comment that was written for a certain tweet is sticking to it even if the order changes.

So, what happened differently, here?

Let me explain it with the same example of X and Y elements. So, if we assign unique ids to those X and Y elements (using :key attribute) Vue starts to recognize each element and it's DOM state as a unique instance in itself. This basically means that now whatever is in the temporary DOM state of X and Y is bound to the application state of X and Y.

So, now if we swap the order of X and Y, what Vue sees is the swapping of the unique element that Vue has identified through those unique ids.

Conclusion

This may not seem like a huge deal right now, but just imagine that you are rendering lists in your Vue app and things have gone pretty complex. Then, if you start seeing weird behaviors occurring, it gets pretty difficult to identify what's going wrong, even though the solution is as simple as adding a :key attribute.

This is why it is always recommended to use :key attribute along with v-for. For almost all the cases, you will not see any problems occurring if you are not using :key but in certain times where the list depends on DOM state and/or the child component's state, then this can cause some funny behaviors to occur.

How does Reactivity work in Vue.js?

Aman Sharma — Sat, 18 Apr 2020 16:17:05 +0000

In the world of Front-end developers, "Reactivity" is something that everybody uses, but very few people understand. It's no one's fault, really, as several people have different definitions of reactivity in programming. So before starting off, let me just give you a definition in terms of Front-end frameworks.

"Reactivity, among JavaScript frameworks, is the phenomenon in which changes in the application state are automatically reflected in the DOM."

Reactivity in Vue.js

Reactivity in Vue.js is something that comes with the package.

Here is an example of reactivity in Vue.js, with two-way binding (using v-model) ,

In the above example, you can clearly see that the change in the data model layer,

    new Vue({
      el: "#app",
      data: {
        message: ""
      },
    })

is automatically reflected in the view layer,

    <div id="app">
      <h1>Enter your message in the box</h1>
      <p>{{ message }}</p><br>
      <input placeholder="Enter message" v-model="message" />
    </div>

If you are familiar with Vue.js, then you might be used to this. But, you must remember that things don't work the same way in vanilla JS. Let me explain it with an example. Here, I have recreated the above Vue.js reactivity example in vanilla JS.

You can see that JavaScript is not naturally reactive here, because when you enter the message, you don't see the message automatically getting re-rendered in the HTML view. Why is it so? What is it that Vue.js does?

Well, to get an answer to that, we will have to understand its underlying reactivity system. Once, we have a clear understanding, we will try recreating our own reactivity system in vanilla JavaScript, which will be similar to the Vue.js reactivity system.

Vue.js reactivity system

Let me break it down for you, from the beginning,

First render

On the first render, if a data property is "touched" (accessing a data property is mentioned as "touching" that property), its getter function is called.

Getter: The getter function calls the watcher with an intent to collect this data property as a dependency.

(If a data property is a dependency, then it means that some target code/function will run, everytime the value of this property changes.)

Watcher

Whenever a watcher is called, it adds that data property as a dependency from whose getter it was called. The watcher is also responsible for calling the component render function.

Component render function

In reality, Vue's component render function is not that simple, but for the sake of understanding, we just need to know that it returns the Virtual DOM Tree with the updated data properties, which gets displayed in the view.

Changes in Data!

This is the part, which is basically the core of reactivity in Vue.js. So, when we make a change in a data property (which was collected as a dependency), its setter function is called.

Setter: The setter function notifies the watcher on every change in the data property. The watcher, as we already know runs the component render function. Hence, the change made in the data property gets displayed in the view.

I hope that the workflow is clear to you by now because we will be recreating this reactivity system in vanilla JavaScript.

Recreating Vue.js reactivity system in vanilla JavaScript

Now, that we are recreating the reactivity system, the best approach would be to understand its building blocks (in code), one-by-one, and in the end we can assemble all of it,

Data model

Task: First of all, we need a data model.

Solution:

What kind of data do we need? Since we are recreating the Vue example that we saw earlier, we will need a data model exactly like it.

    let data = {
        message: ""
    }

A target function

Task: We need to have a target function that will be run once there is a change in data model.

Solution:

The simplest way of explaining what a target function is this,

"Hi, I am a data property message and I have a target function renderFunction(). My target function runs whenever my value changes.

PS: I can have more than one target functions, and not just the renderFunction()"

Thus, let's declare a global variable named target which will help us record a target function for every all the data properties.

    let target = null

Dependency class

Task: We need a way to collect data property as a dependency.

By now, we only have the data and the concept of target functions, which runs when the value of the data changes. But, we need a way to record target functions for each and every data property separately, so that when there is a change in a data property, then only those target functions will run which were stored separately for that data property.

Solution:

We need to have a separate storage space for each data property's target functions.

Suppose we had the following data,

    let data = {
        x: '',
        y: ''
    }

Then, we want to have two separate storage for x and y. So, why not just define a Dependency class and each data property can have its unique instance?

That can be done by defining a Dependency class so that each data property can have its own instance of the Dependency class. Hence, each data property can be allotted its own storage space for target functions.

    class Dep {
        constructor() {
        this.subscribers = []
      }
    }

Dependency class has subscribers array which will act as a storage for target functions.

Now, we need two more things to make the Dependency class fully complete,

depend(): This function pushes target functions into the subscribers array.
notify(): This function runs all the target functions stored in the subscribers array.

    class Dep {
        constructor() {
        this.subscribers = []
      }
      depend() {
        // Saves target function into subscribers array
        if (target && !this.subscribers.includes(target)) {
            this.subscribers.push(target);
        }
      }
      notify() {
        // Replays target functions saved in the subscribers array
        this.subscribers.forEach(sub => sub());
      }
    }

Tracking the change

Task: We need to find a way to automatically run the target functions of a data property whenever there is a change in that property.

Solution:

By now we have,

The data
What needs to happen when data changes
Dependency collection mechanism

Next thing that we need is,

A way to trigger depend() when a data property is "touched".
A way to track any change in a data property and then trigger notify().

To implement this, we will be using getters and setters. Object.defineProperty() allows us to add getters and setters for any data property like this,

    Object.defineProperty(data, "message", {
        get() {
        console.log("This is getter of data.message")
      },
      set(newVal) {
        console.log("This is setter of data.message")
      }
    })

So, we will be defining getters and setters for all the data properties that are available like this,

    Object.keys(data).forEach(key => {
        let internalValue = data[key]

      // Each property gets a dependency instance
      const dep = new Dep()

      Object.defineProperty(data, key, {
        get() {
            console.log(`Getting value, ${internalValue}`)
            dep.depend() // Saves the target function into the subscribers array
          return internalValue
        },
        set(newVal) {
            console.log(`Setting the internalValue to ${newVal}`)
            internalValue = newVal
          dep.notify() // Reruns saved target functions in the subscribers array
        }
      })
    })

Also, you can see above that dep.depend() is being called in the getter because when a data property is "touched", its getter function is called.

We have dep.notify() inside the setter because the setter function is called when there is a change in that data property's value.

Watchers

Task: We need a way to encapsulate the code (target functions) that has to run when a data property's value changes.

Solution:

By now, we have created a system in which data properties are added as dependencies right when they are "touched" and if there is any change in that data property, all its target functions will be executed.

But, there is something that is still lacking, we have not initialized the process with any code for the target functions, yet. So, for encapsulating target functions' code and then initializing the process, we will be using watchers.

A watcher is a function which takes another function as a parameter, and then does the three following things,

Assignes the golbal target variable with the anonymous function that it gets in the parameter.
Runs target(). (Doing this initializes the process.)
Re-assigns target = null

    let watcher = function(func){
      // Here, a watcher is a function that encapsulates the code
      // that needs to recorded/watched.
      target = func // Then it assigns the function to target
      target() // Run the target function
      target = null // Reset target to null
    }

Now, if we pass a function into the watcher and then run it, the reactivity system will be complete and the process will get initialized,

    let renderFunction = () => {
        // Function that renders HTML code.
        document.getElementById("message").innerHTML = data.message;
    }

    watcher(renderFunction);

And, we're done!

Now assembling all of the above code, we have successfully recreated the Vue.js reactivity system in vanilla JavaScript. Here is the implementation of the first example that I showed you, using this reactivity system,

DEV Community: Aman Sharma

Why you should use the key directive in Vue.js with v-for

Application state and DOM state

In-place patch strategy

Updating the order of elements

Solution (Using the :key attribute)

Conclusion

How does Reactivity work in Vue.js?

Reactivity in Vue.js

Vue.js reactivity system

First render

Watcher

Component render function

Changes in Data!

Recreating Vue.js reactivity system in vanilla JavaScript

Data model

A target function

Dependency class

Tracking the change

Watchers

And, we're done!

Solution (Using the `:key` attribute)