vue2心得体会
v-for的key
不仅是vue, react中执行列表渲染时,也推荐添加
key
属性。
要解释key
的做用,就不得不了解一下虚拟DOM
和diff算法
了。
vue和react都实现了一套虚拟DOM
,以及各自的diff算法
,大致相同。
- diff算法核心的两个假设
- 两个相同的组件,会产生类似的DOM结构。 不同的组件,产生不同的DOM结构。
- 组件上
同一层级
的一组节点,他们建议通过唯一的
,id
进行区分。
- diff算法比较规则
- 只比较同层级节点
- 默认情况下,同层级内,只比较同顺序序号的两个节点。
- 如果节点类型不同
- 直接
删除
旧节点,创建新节点
。 - 并且
不再
比较该节点后续的子节点。
- 直接
- 如果节点类型相同
- 更新节点属性和文本内容。
- 继续比较下一个节点。
React的diff算法中,每次遇到数据不同时,都会记录一个mutation,以便于更新DOM.
没有key
html
<!-- 旧节点 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 新节点1: 往后面插入节点 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 此时,按顺序比较,只有最后不同,会有1个mutation -->
<!-- 新节点2 -->
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 此时,按顺序比较,发现每个都不同,会有4个mutation -->
有key
注意,必须保证
key
是唯一的
,且不被修改的
,避免失去作用。
html
<!-- 改进 -->
<ul>
<li :key="1">1</li>
<li :key="2">2</li>
<li :key="3">3</li>
</ul>
<ul>
<li :key="0">0</li>
<li :key="1">1</li>
<li :key="2">2</li>
<li :key="3">3</li>
</ul>
<!-- 此时diff算法会根据key比较,也只有1个mutation -->