怎么用wordpress建立自己的网站,安康网站建设电话,免费网站注册永久,电子商务网站设计成功的要素在前期的快速迭代阶段#xff0c;虽然界面有些杂乱#xff0c;但整体功能尚能凑合运行。真正让人头疼的#xff0c;还是接下来几个关键功能的实现。
遇到的问题
双向绑定
在Vue中#xff0c;v-model提供了方便的双向绑定功能#xff0c;它是modelValue属性和onUpdate:m…在前期的快速迭代阶段虽然界面有些杂乱但整体功能尚能凑合运行。真正让人头疼的还是接下来几个关键功能的实现。
遇到的问题
双向绑定
在Vue中v-model提供了方便的双向绑定功能它是modelValue属性和onUpdate:modelValue事件的语法糖。然而我的低代码开发基于JSON配置每个细节都需要通过代码控制因此我是通过Vue的h函数进行渲染想要实现类似v-model的双向绑定体验却相当困难。经过多次版本迭代才勉强实现了基本的双向绑定。
示例如下
{id: component_1xxx,label: 组件,uiType: component,uiName: 组件,domType: div,children: [{id: component_2xxx,uiType: component,domType: el-input,attrs: [{label: 输入值,key: modelValue,type: string,value: ,id: modelValue_1xxx}]}],data: [{id: var_1xxx,label: 变量_1,value: 变量1值}],bind: {modelValue_1xxx: var_1xxx,}
}这个配置的意思是将el-input组件的“输入值”属性与“变量_1”绑定。
为了管理这种绑定关系我在最上层的bind字段中维护变量绑定关系。当el-input的值变化时我需要通过onUpdate:modelValue事件先查找bind中是否有绑定关系再修改data中的变量值。整个过程繁琐必须不断地向上触发emit事件直到最顶层处理。这种设计不仅冗长层级深时还容易出错甚至影响性能。
我曾考虑通过inject的方式将最外层配置传递到子组件中减少事件触发的层级但最终放弃了。
新的解决方案
在新版本中我提出了一个新的思路在顶层创建一个当前组件或页面的实例VNode上下文context在创建VNode时初始化所有变量并将其传递给子组件让每个组件自己去处理和修改变量值。
这个思路已经在工作项目中实现了一部分不经常变化的页面动态化至今为止用户还没有发现这些页面是通过低代码配置生成的。
示例代码 // 创建应用实例但不挂载到 DOM 中const app createApp(MyComponent);// 使用一个虚拟的 DOM 元素来挂载const vnodeContainer document.createElement(div);document.body.appendChild(vnodeContainer); // 需要在文档中才能完成挂载runtimeInstance.value app.mount(vnodeContainer);// 移除挂载点从而使组件不显示在页面上app.unmount();console.log(instance: , runtimeInstance); // 可以访问组件实例这种设计有一个明显的好处就是将运行时状态与配置JSON完全隔离开。运行时的变化只影响运行时的对象而不会对JSON配置产生任何改动。对低代码开发而言JSON配置就是“程序”运行时的变化不应该直接修改配置数据。这样即便页面崩溃也能快速恢复到初始状态。
持续的难题
尽管引入了VNode上下文的方式解决了一些问题但bind字段的绑定方式依然存在无法彻底抛弃。这增加了代码的复杂度涉及到多个方面的逻辑改造起来依然面临诸多挑战。
体验最新的轻构低代码
账号test 密码123456
