LowCode-项目记录

数组拖拽diff处理：

在数组中给每一项打上的key功效
Vue源码阅读尚不够深，基于已有知识初步判断
数组--> ··产生key映射到组件的哈希表·· --> 产生同一层级的虚拟DOM ---> 产生同一层级的真实dom
当数组更新后，新旧虚拟dom比较（首先比较key，然后比较key对应的元素）

vuedraggable事件触发

add\remove 只会触发发生相应改变的 drag对象
start\end 触发初始点击的 drag对象
start -> add -> remove -> end

draggable标签会映射成div标签

拖拽监听事件中的event参数中的to \ from \ item 为 draggable 映射的 div 标签

预览页面

组件绑定的变量只能由计算得到（例如el-input 的v-model需要直接绑定对应字段，但根据schema生成只能遍历计算得到字段，会被误认为是结果）

---- 将v-model拆分成 :value与@input，且不能直接传计算表达式（仍然直接使用得到的值，而不是作为一个变量{供组件通信使用}），通过传入两个函数来获取

但上述解决方式会导致对监听事件的修改变得很困难，待解决

<div
   v-for="(item, index) in sublist.children"
   :key="index"
   class="row-item">
     <el-input v-if="item.type == 'input'" v-bind="{ ...item.options }" :value="getterDigData(item.options.vModel)" @input="setterDigData($event , item.options.vModel)"></el-input>
</div>

el-input输入每次输入后自动失去焦点

---- 原因如上代码中使用了v-for的key使用的不是index，导致数据更新后虚拟dom比较检测到不同，重刷页面