Question

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

我在这里放了一个简短的示例代码： https://gist.github.com/yellow1912/fc1c053e07c1ca136148484cf7f79d1a

我也在这里放了一个Codepen： https://codepen.io/raineng/pen/zYGOXYY?editors=1111

<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>

要了解我的意思，请打开Codepen上的“控制台”选项卡，单击“添加”项，您将看到动态组件项每次都被销毁并重新创建。

Answer 1

我发现了为什么，我需要使用keep-alive：

https://vuejs.org/v2/guide/components-dynamic-async.html

引用：

尽管在这些组件之间切换时，有时您会想要保持其状态或避免由于性能原因重新渲染

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

在此问题上浪费了2天，然后在将其发布到StackOverflow之后不久，我找到了答案。希望对别人有帮助。

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

1 个答案: