As aVue
developer, we all know that when using thev-for
directive to render a list inVue
, it must be in each child component. Add akey
attribute. Thiskey
attribute is a special attribute used to identify the uniqueness of each node. There is a big difference between thekey
in theVue2.x
version and thekey
in theVue3.x
version, so in this blog , we will discuss the difference betweenkey
inVue2
andkey
inVue3
.
In theVue2.x
version,key
Mainly used for optimization strategies inVue’s virtual DOM algorithm. In Vue2, when using thev-for
instruction to render a list,Vue
will compare the old and new nodes based on the value ofkey
, and thenDOM
Update.key
inVue2
has the following characteristics:
key must be a string or numeric type,cannot be an object and array. [Related recommendations:vuejs video tutorial,web front-end development]
randomly generated.
, due to the use of thekey
optimization strategy,DOM
rearrangement and Re-rendering improves rendering performance and avoids erroneous data updates.
version, the role ofkey
is the same asVue2.x# The
in the ## version is different, it is mainly used to
track the identity of the node. InVue3, when using thev-fordirective to render a list,
Vuewill determine which nodes are new based on the value of
keyWhich nodes were added and deleted, and then the DOM was updated.
keyin
Vue3has the following characteristics:
The value of key must be unique and cannot be repeated.
keyin
Vue3and
Vue2is that the key in Vue3 is used for Keep track of node identity, rather than just optimizing rendering. This means that in
Vue3, the
uniqueness ofkey
must be guaranteed, otherwise it will lead to node identity confusion, resulting in incorrect rendering results.
This design is mainly toimprove rendering efficiency and performance
Vue2, there may be some problems when dealing with dynamic lists.The
reason
Vue2just makes asimple judgment based on thekey
value, and then compares The difference between old and new nodes makes it impossible to accurately know which nodes are added and which nodes are deleted.
Vue3solves these problems. Using
keyyou canaccurately determine
which nodes are added and which nodes are deleted. This makesVue3
more efficient and accurate when processing dynamic lists, avoiding some problems existing inVue2. Therefore, designingkey
to track the identity of nodes is an important optimization forVue3
in improving rendering efficiency and performance.Conclusion
andkey# in
Vue3##There is a big difference in usage. The
keyin
Vue2is mainly used to optimize rendering performance, while the
keyin
Vue3is mainly used to track the identity of the node. The
keyin
Vue3can be of any type, including objects and arrays, but uniqueness must be guaranteed.
Whether we are using
Vue2or
Vue3
key must be added when using thev-for
instruction to render the listAttribute, this is to ensure the correctness of rendering.
(Learning video sharing:
vuejs introductory tutorial,
Basic programming video
The above is the detailed content of An article discusses the difference between key in Vue2 and key in Vue3. For more information, please follow other related articles on the PHP Chinese website!