Skip to content
On this page

vue2心得体会

v-for的key

不仅是vue, react中执行列表渲染时,也推荐添加key属性。
要解释key的做用,就不得不了解一下虚拟DOMdiff算法了。
vue和react都实现了一套虚拟DOM,以及各自的diff算法,大致相同。

  • diff算法核心的两个假设
  1. 两个相同的组件,会产生类似的DOM结构。 不同的组件,产生不同的DOM结构。
  2. 组件上同一层级的一组节点,他们建议通过唯一的,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 -->

一个陪你成长的前端博客 - XDocs