Vue.js 为什么每次重新渲染都会在循环中销毁Vue动态组件？

我遇到了Vuejs 2.x版本（最新版本）的问题。在循环中呈现项目列表时，如果对项目进行更改，则正常组件不会被销毁，但动态组件将始终被销毁：

我在这里放了一个简短的示例代码：

我还在这里放了一个代码笔：

请在此增加


请在这里减价


印刷
这是一个测试

---

要了解我的意思，请打开codepen上的console选项卡，单击add项，您将看到动态组件项每次都会被销毁和重新创建。

我发现了原因，我需要使用keep alive：

引述：

不过，在这些组件之间切换时，有时您可能需要 以保持其状态或避免由于性能原因而重新渲染

重新创建动态组件通常是有用的行为，但在这种情况下 在这种情况下，我们真的希望这些选项卡组件实例被缓存一次 它们是第一次被创造出来的。为了解决这个问题，我们可以 我们的动态组件包含一个元素

在这个问题上浪费了2天时间，然后我在StackOverflow上发布了这篇文章后，马上找到了答案。希望它能帮助别人

<nl-test inline-template>
    <div>
        <div v-on:click="increase"> increase here please </div><br><br>
        <div v-on:click="decrease"> decrease here please </div>
        <ul>
            <li v-for="(value, key) in getItems()" :key="key">
                printing
                <component :is="getItem()" :key="key"></component>
                <nl-test inline-template>
                    <div>
                        this is a test here
                    </div>
                </nl-test>
            </li>
        </ul>
    </div>
</nl-test>