Vuejs2 插入v-for内的组件列表中，将重新创建所有剩余组件

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

Vue.component（'type-a'{
模板：{{context.name}}已准备：{{prepared}}，
道具：['context']，
数据：函数（）{
返回{
准备就绪：错误
}
},
方法：{
就绪：函数（）{
这是真的；
}
}
});
Vue.组件（'type-b'{
模板：{{context.name}}已准备：{{prepared}}，
道具：['context']，
数据：函数（）{
返回{
准备就绪：错误
}
},
方法：{
就绪：函数（）{
这是真的；
}
}
});
Vue.组件（“c型”{
模板：{{context.name}}已准备：{{prepared}}，
道具：['context']，
数据：函数（）{
返回{
准备就绪：错误
}
},
方法：{
就绪：函数（）{
这是真的；
}
}
});
新Vue({
el:“#main”，
数据：{
位置：0，
模块：[
{上下文：{name:'article-init-a'}，type:'type-a'}，
{上下文：{name:'article-init-b'}，type:'type-b'}，
{上下文：{name:'article-init-c'}，type:'type-c'}
]
},
方法：{
插入：函数（）{
splice（this.position，0，{context:{name:'new-article-a'}，type:'type-a'}）
},
insertB：函数（）{
splice（this.position，0，{context:{name:'new-article-b'}，type:'type-b'}）
},
insertC:函数（）{
splice（this.position，0，{context:{name:'new-article-c'}，type:'type-c'}）
}
}
})

---

您可以单击“文章”将其设置为“已准备”，然后再插入新文章。新文档下面的所有文章都将自动处于未准备状态。Vue似乎重现了它们。有没有办法进行演练？

每当您在

模块中添加新的
上下文
时，它会重新呈现
模块
数组中的所有文章，并再次初始化所有这些组件，将
就绪
变量重置为false

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

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

每当您在
模块
中添加新的
上下文
时，它将重新呈现
模块
数组中的所有项目，并再次初始化所有这些组件，将
就绪
变量重置为false

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

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

在上下文上绑定状态是可以的，但是，对于每种类型的模块，都有很多状态。管理如此庞大的上下文是不好的，因为其中一些状态实际上是内容，如文章文本、自定义颜色，而不是系统状态。这似乎是此上下文中的唯一方法。可以在上下文中绑定状态，但是，对于每种类型的模块，都有许多状态。管理如此庞大的上下文是不好的，因为其中一些状态实际上是内容，如文章文本、自定义颜色，而不是系统状态。这似乎是这种上下文中的唯一方法。
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({
    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})
        },
    ....
    ....