vue为什么不能用index作为唯一标识?这涉及到原生js的DOM操作,以及虚拟DOM带来的优化,下面分为2个部分来谈
- 虚拟DOM
- 为什么不能用index作为key
1.虚拟DOM
先来看看原生操作dom节点的方式,但是浏览器响应DOM操作是非常耗能的,因为节点的改变会导致浏览器进行重排重绘操作(可参考浏览器渲染页面的过程)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><ul></ul></div><script> let ul = document.querySelector('ul')for (let i = 0; i < 3; i++) {let li = document.createElement('li')li.innerHTML = i + 1ul.appendChild(li)} </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-