数组型Editor

[jiangshanmeta]

Editor是我在写vue-admin时创造的概念，Editor是用来负责编辑的组件的统称，常见的Input Select 之类的都是Editor。数组型Editor意味着所编辑的数据结构是数组，数组中的一项可能一个简单值(对应Input Select 等Editor)，也可能是包含多个字段的复杂值(这个反而比较常见，下面都以这种为例)。

对于这种类型的Editor，一个常见的写法是这样

<div>
    <div v-for="item in value" :key="item.id">
        <InputA v-model="item.fieldA"/>
        <InputB v-model="item.fieldB">
        <InputC v-model="item.fieldC">
    </div>
    <button @click="addItem">add</button>
</div>

这应该是最简单粗暴的写法了，但是这样做在数组中的元素非常多的时候会使得页面非常卡顿，因为每输入一次，数组中的每一项对应的virtual dom均会参与diff(他们都在一个组件内啊 还是平级的呢)，显然运算量会非常大。

优化措施是每一项拆成一个独立的Editor

<div>
    <EditorItem v-for="item in value" :key="item.id"/>
    <button @click="addItem">add</button>
</div>

EditorItem其实是一个kv型Editor，所谓kv型editor 是其value值是一个对象(kv) 其key不会变化，这种也是常见的Editor了