【低代码】前端低代码开发日记2_遇到的问题（2）变量绑定
解决完双向绑定的问题，关于变量绑定的问题还有很多没有解决，变量的绑定是困惑我很久的问题，致使我一度想要放弃。
遇到的问题
变量绑定
当我们想要把一个静态页面页面动起来，在Vue中，我们只需要把变量和属性绑定好后，修改变量值就可以看到页面的变化，但是就是变量的绑定的功能给我造成了巨大的困扰。
{"id": "component_nQ-SP","label": "组件","uiType": "component","uiName": "组件","domType": "div","children": [{"uiType": "component","uiName": "h1元素","domType": "h1","children": [{"uiName": "文本","uiType": "text","attrs": [{"label": "内容","key": "textContent","value": "$refs:{\"nodeId\":\"var_z2pah\"}","id": "textContent_Fe8S7"}],"id": "text_J8Sb5","label": "文本_ON6jA"}],"id": "component_hCTZm","label": "h1元素_Oan0q"}],"data": [{"id": "var_z2pah","label": "变量1","key": "var1","value": "测试文本","type": "string","arrayType": "","objectType": ""}],"bind": {"textContent_Fe8S7": "var_z2pah"},
}
我把变量的绑定分了几个难度级：
1.普通难度：
- 组件中整个属性的绑定和整个变量的绑定
在这一层次中，所有值都可以直接通过bind字段进行绑定，操作相对简单。
2.困难难度：
- 需要绑定某个对象的某个属性。
- 需要绑定数组变量的某个数组项。
对于这些情况，我采用了表达式替换的方式。例如，值以$refs:开头时，就表示引用了变量。此时没有使用bind字段，因为它无法有效描述属性的绑定。最初我考虑过使用JSONPath描述，但由于复杂性太高而放弃。
如果绑定的是表达式（而不是直接的变量），如var_1 + 1，实现难度则会更高。由于涉及到双向绑定时值变化的情形，我没有去实现这一功能。
经过多番思考，我决定使用CodeMirror来维护变量引用。在输入过程中，可以为用户提供提示和高亮功能。尽管这与我最初“所有配置都能通过点击完成”的想法相悖，但为了实现灵活性，我还是选择了这一方式。
体验最新的轻构低代码
账号：test
密码：123456
欢迎试用并给建议，目前BUG比较多