Почему Vue динамические c компоненты разрушаются внутри l oop при каждом повторном рендеринге?

Question

Я столкнулся с проблемой с Vuejs 2.x версией (последней). При рендеринге списка элементов внутри al oop, если я внесу изменения в элементы, то обычные компоненты не будут уничтожены, но динамические c компоненты всегда будут уничтожены:

Я поставил короткий образец код здесь: https://gist.github.com/yellow1912/fc1c053e07c1ca136148484cf7f79d1a

Я также поместил здесь кодовую ручку: 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, щелкните элемент add, и вы увидите, что элементы динамического c компонента уничтожаются и воссоздаются каждый раз.

Answer 1

Я выяснил почему, мне нужно использовать keep-alive:

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

Цитировать:

Когда переключаясь между этими компонентами, вы иногда захотите сохранить их состояние или избежать повторного рендеринга по соображениям производительности

Воссоздание динамических c компонентов обычно является полезным поведением, но в этом случае нам бы очень хотелось эти экземпляры компонентов вкладки должны быть кэшированы, как только они будут созданы впервые Чтобы решить эту проблему, мы можем обернуть наш динамический c компонент элементом

Потраченный впустую 2 дня на эту проблему, а затем я нашел ответ через мгновение после публикации этого в StackOverflow. Надеюсь, это кому-нибудь поможет.