Vue用diff算法,新虚拟DOM和旧虚拟DOM比较:
情况1: 根元素变了,删除重建
旧虚拟DOM:
<div id="box">
<p class="my_p">123</p>
</div>
新虚拟DOM:
<ul id="box">
<li class="my_p">123</li>
</ul>
情况2: 根元素没变, 属性改变, --->元素复用, 更新属性
旧虚拟DOM:
<div id="box">
<p class="my_p">123</p>
</div>
新虚拟DOM:
<div id="myBox" title="标题">
<p class="my_p">123</p>
</div>
情况3: 根元素没变, 子元素没变, 元素内容改变
无key - 就地更新
v-for不会移动DOM, 而是尝试复用, 就地更新,如果