前端自动化生成---思考笔记（持续更新）

背景：一些系统类项目，前端的页面来来去去是那几个类型，列表、表单居多。这些页面都是类似的，是否能尽量节省重复劳动？

目标：通过简单的一些配置能够自动生成列表、表单等

思考思路：

1. 想自动先手动，是不是应该实现通过手写配置就能生成页面。第一个想到vue的render函数，写一份配置自动调用createElement？
2. 用CreateElement写完一个页面我们就可以得到一份非常复杂的配置，这个时候应该做的就是简化配置了
   1. 提取共性，如列表都有查询，分页，筛选等
   2. 简化配置，一个公司的项目，页面大多雷同，把一些常用的配置项作为默认值
3. 不断的提取共性，抽象配置，简化配置（异想天开：这步是否可以交给机器自己做？）
4. 结果是否成功就是看配置能否简化到有实用价值，下面开始试试

代码实现

1. 先封装一个组件用于读取配置生成页面。ps: render函数的使用不是非常熟，跪求大佬指教

2. 先用上面的组件生成一个表单试试
   1. 试过的同学故意傻眼了，首先是render函数不能绑定被数据劫持的参数，这个很好处理，这个深拷贝一下就能解决。this指向也顺便弄了
   2. 第二个问题我到现在还没搞清楚问题原因，只能先来个曲线救国，后续我找到具体原因会跟大家分享。具体问题是这样渲染出来的input，输入事件能监听到，但是test的值修改了，input无法接收到

      -------------------父组件---------------------------
      // 解决办法是把config包装成一个函数
      config() {
          {
            dom: 'el-input',
            config: {
            props: {
                // 这里是问题的关键，你如果把这个赋值操作放到render外是不行的，推测是因为render函数会
                  包装监测里面进行的赋值操作，并记录起来。
                value: this.test
            },
            on: {
                // 这里注意，因为在父组件里会修改this指向，所以需要使用箭头函数
                input: (e) => {
                  this.test = e;
                }
            }
          }
      }
      
      -------------------render组件----------------------------
      // 读取配置的时候，通过apply修改this指向父组件
      const newConfig = context.props.config.apply(context.parent)
      return createVNode(newConfig);

      ​​​​​​​