It transitions smoothly into halfway through the screen and clearly displays the options that you, the user, have for navigating the webpage. Imagine a mobile menu sliding in from the left 📲 after you’ve touched on a hamburger 🍔 icon (🤔 we have hamburguer and kebab menus, let’s make 🥑 menu happen team!). When an object moves around the screen, slides, or fades, we expect that object to be consistent and easy to track as it conveys the information it’s trying to show us. Object ConstancyĪnimations are not just a pretty way to move data around 🎬 - they convey important information to our users of what is happening to the information they are looking at. If the key is not defined, you are at risk of data and state being destroyed due to a re-render of the DOM.įinally, keep an eye out for v-for loops that cycle on an element that contains a stateful element WITHIN it. This of course also applies to looping custom-made components that hold state - the same rule of thumb applies. " v-for = "item in items " /> " v-for = "item in items " :key = "unique-condition " /> The key property will assist Vue in making a better job of recognizing each element on the list, and not destroying elements potentially that could hold elements with a state within them. This same case applies to looping through elements that make use of the v-html directive. This problem will lead to a situation VERY hard to debug if you don’t know exactly what you are looking for, because it may simply “look” like there’s a problem with how the data you are gathering from the form is being magically deleted. When Vue’s virtual DOM is modified because our reactive data changed, we can have cases where the DOM that holds our looped elements can be completely or partially destroyed if the key is not properly set. When working with HTML elements that have a state in our v-for loops we have to be careful that that state does not get destroyed when the DOM is re-rendered.Įlements like, and all hold an internal state that captures the value of that element. But with the better understanding of what it will accomplish and why you need to add it. My personal suggestion, in this case, is that you continue to use it in every case. There are particular cases where the use of key is vital, either to provide data consistency and not lose values (for example in forms) or to attain object constancy in animations. So why do we get eslint warnings and console warnings? ⚠️ This implies that you understand the attribute in order to actually get the desired outcome. This process, however, has the faults of being generic and automated, and even though it is GOOD at its job - you, the programmer 💻, will probably know better on how the performance and DOM manipulation should happen.
Less movement means less re-rendering and better performance.
When :key is missing, Vue will use internal functions or algorithms to try to figure out the best way to avoid moving DOM elements around. It is not actually even required that you add it. If you don’t add the :key attribute to your v-for loop, the app will not come crashing down on itself in fiery wrath.
Sweet relief, the errors are gone and you can move on seeking the betterment of humanity through JavaScript.Įxcept, what exactly does this all even mean? And why should you care? Understanding the Basics of :key 🔑Īs suggested by the official docs the key special attribute is used by Vue as a hint for it to understand what exactly it is you’re trying to accomplish.īut what exactly does it mean to say that it is only a hint? Vue is smart.
You give in to your instincts and add a :key based on the array’s loop. 🚧 You panic a little, Vue is demanding it. Maybe you decide to ignore it and to carry on with your avocado-induced nirvana, but then it strikes you one more time. Maybe you are using the amazing Vue CLI 3, and got yourself a nice setup that gives you some eslint errors and hints.Īll of a sudden you are minding your own business, eating your avocado toast and morning latte, and the squiggly lines catch your attention. In this article we will go in depth to answer the question: When do I use it, and why do I need to? The Problem The key attribute in Vue is sometimes one of the most misunderstood and neglected ones in the whole framework.
0 kommentar(er)
