插入 v-for 中的组件列表会导致所有剩余的重新创建

Question

我在使用 Vue#2.1.6 创建页面内容编辑器时遇到问题。我使用 Vue 动态组件来处理每篇文章。当我将一篇新文章插入 v-for 列表时，所有剩余的文章都被重置为它们的初始状态。这是例子 https://jsfiddle.net/3jowy381/

Vue.component('type-a', {
    template: '<div class="style-a" @click="ready">{{context.name}} prepared: {{prepared}}</div>',
    props: ['context'],
    data: function () {
        return {
            prepared: false
        }
    },
    methods: {
        ready: function () {
            this.prepared = true;
        }
    }
});
Vue.component('type-b', {
    template: '<div class="style-b" @click="ready">{{context.name}} prepared: {{prepared}}</div>',
    props: ['context'],
    data: function () {
        return {
            prepared: false
        }
    },
    methods: {
        ready: function () {
            this.prepared = true;
        }
    }
});
Vue.component('type-c', {
    template: '<div class="style-c" @click="ready">{{context.name}} prepared: {{prepared}}</div>',
    props: ['context'],
    data: function () {
        return {
            prepared: false
        }
    },
    methods: {
        ready: function () {
            this.prepared = true;
        }
    }
});

new Vue({
    el: '#main',
    data: {
        position: 0,
        modules: [
            {context: {name: 'article-init-a'}, type: 'type-a'},
            {context: {name: 'article-init-b'}, type: 'type-b'},
            {context: {name: 'article-init-c'}, type: 'type-c'}
        ]
    },
    methods: {
        insertA: function () {
            this.modules.splice(this.position, 0, {context: {name: 'new-article-a'}, type: 'type-a'})
        },
        insertB: function () {
            this.modules.splice(this.position, 0, {context: {name: 'new-article-b'}, type: 'type-b'})
        },
        insertC: function () {
            this.modules.splice(this.position, 0, {context: {name: 'new-article-c'}, type: 'type-c'})
        }
    }
})

您可以点击文章进行准备，然后插入新的文章。 new 下的所有文章自动变为未准备状态。 Vue 似乎重新创建了它们。有没有办法绕过？

Answer 1

每当您在 modules 中添加新的 context 时，它都会重新呈现 modules 数组中的所有文章，并再次初始化所有这些组件，重置ready 变量为 false。

通过在其中一个元素中放置 mounted 生命周期挂钩，这一点很明显。

一个解决方案是将 prepared 属性移动到上下文本身，因为它看起来像一篇文章的属性，所以它可以放在文章名称旁边。假设我已经修改了你的fiddler，请check。

new Vue({
    el: '#main',
    data: {
        position: 0,
        modules: [
            {context: {name: 'article-init-a', prepared: false}, type: 'type-a'},
            {context: {name: 'article-init-b', prepared: false}, type: 'type-b'},
            {context: {name: 'article-init-c', prepared: false}, type: 'type-c'}
        ]
    },
    methods: {
        insertA: function () {
            this.modules.splice(this.position, 0, {context: {name: 'new-article-a', prepared: false}, type: 'type-a', prepared: false})
        },
    ....
    ....

插入 v-for 中的组件列表会导致所有剩余的重新创建

Inserting into a component list within v-for cause all remaining recreateed

vuejs2