为什么v-for中的index不建议当作key
如果用index作为key,diff在比较新旧vnode时候会出现不必要重复比较,耗费性能
例如有下面两个vdom,第一个是旧vdom,第二个是新vdom;
第二个vdom删除002节点后,key值依旧是1 2 3 4。按照diff算法,此时就需要比较vnode里面的text,此时从key=2开始text都发生了变化,那么后面的vnode必须全部渲染一遍,耗费性能;
加入key使用唯一id,第二个vdom删除002节点后。003 004 005这些节点的key也没有变化,不需要重新渲染。只需要把002节点从旧vdom中删掉即可;
旧vdom:
<ul>
<li key="1">001<li>
<li key="2">002<li>
<li key="3">003<li>
<li key="4">004<li>
<li key="5">005<li>
<ul>
新vdom:
<ul>
<li key="1">001<li>
<li key="2">003<li>
<li key="3">004<li>
<li key="4">005<li>
<ul>
新vdom(key唯一):
<ul>
<li key="1">001<li>
<li key="3">003<li>
<li key="4">004<li>
<li key="5">005<li>
<ul>