Javascript应用程序框架如何只重新绘制修改过的元素？

假设我们有一个集合：

var model=new model（[1,2,3,4,5]）

我们使用一些javascript应用程序框架（如主干、react、ember、angular、vue等）对其进行渲染。因此最终结果如下所示：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

现在我想知道的是，这些框架如何检测到只有

0

是新的，并将其预先添加到集合视图中，而不是认为它是一个全新的集合（因为所有的项索引都已更改）并重新绘制整个集合

---

我很好奇他们是否使用了一些共同的逻辑，以及什么是当今的“最佳实践”。谢谢大家!

我不能代表所有框架，但我可以提供一个使用AngularJS和KnockoutJS的示例

（1.x）使用一种称为脏检查的方法。尽管它们的实现有点复杂，但脏检查本身是一个非常简单的概念

AngularJS有一个被称为消化循环的概念。在这个摘要周期中，AngularJS查看其应用程序模型上的对象，称为。它基本上看起来会说，“好的，这个对象改变了吗？它改变了。好的，让我们更新视图。这个对象改变了吗？不。好的，我继续检查下一个对象。”

虽然这在大多数应用程序中都能很好地工作，但是随着我们向应用程序模型中添加越来越多的对象，您可以看到性能会受到怎样的影响

另一种常见的JavaScript框架（如仅更新所需内容）是通过。在KnockoutJS中，这是因为视图模型上的所有对象都声明为可观察对象。因此，当视图模型（subject）上的对象发生更改时，它会向其“观察者”发出事件通知，以更新视图的结果结束

虽然这在大多数应用程序中也很有效，但在这种情况下性能也会受到影响。由于您基本上是在视图模型上用可观察对象包装每个对象，因此所有对象现在都有更多的开销

也请回答您的主要问题，对于JavaScript框架如何选择这样做，确实没有“最佳实践”。与软件世界中的大多数事物一样，这两种选择都存在权衡