Menu
What I mean is this:
Let's say we have a v-for directive in our custom vue component used in the following way:
<my-custom-component v-for="item in items" :key="item.id">{{item.remark}}</ my-custom-component>
What is the purpose of using :key="item.id" here?
269
key # The key special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible.
The Key attribute is used to denote the property that uniquely identifies an entity (the EntityKey ), and which is mapped to the Primary Key field in a database: public class Order. { [Key]
The purpose of this key attribute is to give "a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list" (from Vue. js Docs). Essentially, it helps Vue identify what's changed and what hasn't.
The key attribute tells Vue how your data relates to the HTML elements it's rendering to the screen. When your data changes, Vue uses these keys to know which HTML elements to remove or update, and if it needs to create any new ones.
I’ve been working a lot with Vue lately, and while it’s generally been a pleasant experience, there’s one challenge that I keep running into: generating unique component keys. One of Vue’s essential features is the v-for loop, which allows you to render an element for each item in an array.
This same case applies to looping through elements that make use of the v-html directive. 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.
Something like this: The purpose of this key attribute is to give "a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list" ( from Vue.js Docs ). Essentially, it helps Vue identify what's changed and what hasn't.
As 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. But what exactly does it mean to say that it is only a hint? Vue is smart. 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.
Ordinarily in a v-for loop, a change in the ordering of your array elements can result in undesired behavior. Imagine, for example, if your child component happened to be a form with inputs containing data that you've filled in. If you reorder your array, then that input information doesn't move with your array elements! You would expect that when you reorder your array, any changes made in the child components would move with those array elements.
Having a unique key solves this problem. The key acts as a sort of flag that tells Vue "if the data associated with this child component is moved somewhere else, then move the component along with it to preserve the changes that already exist".
This is all explained in the documentation. I highly encourage you to read this section carefully.
Recommended is that you do not use the array index as the unique id value as that is essentially the same as using no key at all. Instead, include an id field in your data that you initialize from the very beginning. Then, you can do something like :key="item.id" or :key="'child-component-'+item.id".
54
Actually key we need when some HTML tag is loading in the loop to make them unique.
If we are not providing key attribute, then vuejs will upload the same component with previous data.
let me know if you have any doubt.
for example
<div v-for="item in items" :key="item.id">
<!-- content -->
</div>
for more details,please refer the link: https://vuejs.org/v2/guide/list.html
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
