Vue中key的作用和原理

最新推荐文章于 2024-07-04 09:54:33 发布

wenbin_666

最新推荐文章于 2024-07-04 09:54:33 发布

阅读量203

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_44912955/article/details/120612148

版权

Vue中的key用于给遍历节点提供唯一标识，优化虚拟DOM的 diff 过程。当key等于index时，数据变动可能导致不必要的DOM更新，降低效率。若使用唯一标识，可以更精确地跟踪和更新DOM，尤其在涉及输入组件时，避免错误的DOM更新。

摘要由CSDN通过智能技术生成

key的作用和原理

key的作用

给遍历节点的一个唯一标识

当key为index时

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    <button @click='add'>添加一个老刘</button>
    <ul>
      <li v-for='(value,index) in persons' :key='index'>{
  {value.name}}-{
  {value.age}} <input type