为什么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>

results matching ""

    No results matching ""