Reference article:Blog.csdn.net/weixin_4568…
Write in front | Vue source series – Vue Chinese community (vue-js.com)
The problem
We have two item-wrap and the first item-wrap has four items, and the second item-wrap has three items. It turns out that the components used in the item-wrap are duplicated, that is, the three items of the second item-wrap use the first three items of the first item-wrap
Problem of repetition
1. In Data, set a name attribute as a unique value. In Mounted, set the name attribute to a unique value
2. Monitor its status
3. Switch to item-wrap to check its status. You can see that when the second item-wrap is toggled, its values are the component id of the first item-wrap
4. Add a key value to the component
Item-wrap-2 -> item-wrap-2 -> item-wrap-2 -> item-wrap-2 -> item-wrap-2 -> item-wrap-2 -> item-wrap-2 -> item-wrap-2 -> item-wrap-2 -> item-wrap-2 -> item-wrap-2
conclusion
In the case of v-if, vue will selectively ignore the rendering of the VNode when it is generated, if the key is not added. Vue will not recognize similar components, causing problems such as not rerendering. Adding a key increases the uniqueness of the component and helps vUE operate on it properly