Question

我读到每次更新时都会调用render函数，但事实并非如此。我创建了该Codepen以显示我的发现。渲染函数实际上只被调用一次吗？

render: function (createElement)...

Answer 1

每次更改都会执行render()函数，您可以通过在其中放置一个简单的console.log('render!')来看到这一点。

为什么渲染的结构不重新创建删除的元素？嗯，这是由于Vue使用的实际DOM的内部虚拟DOM 表示形式。虚拟DOM 不知道，因为“删除操作”没有通过该元素，因此删除了一个元素。

只要涉及到虚拟DOM，该元素仍然存在，因此它不会触摸实际的DOM来重新创建它。这就是虚拟DOM的“差异”。

请注意，此概念并非Vue专有，例如React states this in its docs：

React无法识别React之外对DOM所做的更改。它根据自己的内部表示来确定更新，以及相同的DOM节点由另一个库处理，React获取困惑，无法恢复。