3. render函数 & 配置数据

要说 render函数 也不是真的完美，毕竟要自己去实现譬如 v-if 、 v-model 这种指令，但是没问题，它带给我的便利给大，所以我能接受。

正式演示配置化的实现时，笔者先声明一点：这里的只是 demo 级别的，具体实战到项目要根据业务场景。笔者做业务时，是对 select 、 cascader 等组件都封装了一层。因为很多时候我们的下拉数据要去后端拿，封装后组件可以通过传入的 params 和 urlPath 去获取数据。所以，大家更要关注思路，然后根据业务场景自己去思考、实现即可。

首先配置数据如下：

export default [

  {

    type: 'el-input',

    label: '活动名称',

    formKey: 'name',

    value: '', // 默认值为空字符串

    options: {

      vIf: [

        // 表示：当 form.area === 'area1'，才显示

        { relationKey: 'area', value: 'area1' }

      ]

    }

  },

  {

    type: 'el-select',

    label: '活动区域',

    formKey: 'area',

    value: 'area1',

    options: {

      multiple: true

    },

    optionData: [ // 这里模拟去后端拉回数据

      { label: '区域1', value: 'area1' },

      { label: '区域2', value: 'area2' }

    ]

  }

]

我们把 render函数 改造后，变成这样

<script>

export default {

  name: "FormItemDemo",

  props: {

    itemConfig: Object // 接收配置，外部传入

  },

  render(createElement) {

    return createElement('el-form-item', {

      props: {

        label: this.itemConfig.label // 表单项的label

      }

    }, [

        // 表单组件

        createElement(this.itemConfig.type, {

          props: {

            value: this.itemConfig.value // 这里是自己实现一个 v-model

          },

          on: {

            change: (nVal) => { // 这里是自己实现一个 v-model

              this.itemConfig.value = nVal

            }

          }

        }, this.itemConfig.optionData && this.itemConfig.optionData.map(option => {

          // 这里只是 本demo 处理 el-select 的 option 数据，实际大家根据具体业务来实现即可

          return createElement('el-option', { props: { label: option.label, value: option.value } })

        }))

    ])

  }

}

</script>

接下来我们在 app组件 中同时应用我们的 配置 + FormItemDemo 组件：

<template>

  <div>

    <el-form label-width="100px">code>

      <FormItemDemo v-for="item in config" :item-config="item" />code>

    </el-form>

  </div>

</template>

<script>

import FormItemDemo from "./components/FormItemDemo.vue";

import config from "./config";

export default {

  name: 'App',

  components: { FormItemDemo },

  data () {

    return {

      config

    }

  }

}

</script>

这时候我们看下页面长什么样？

ok！！！实现了，接下来，我们只需要根据业务需求不断丰富我们的 <code>FormItemDemo 组件即可。这里，笔者会带着大家一起实现一个 联动显示隐藏 、 下拉框多选 的功能～相信看完后，你一定有醍醐灌顶的感受，然后就可以自己根据业务去实现需求了。

用了一个 <code>computed 去实现这个需求。大家可以不用仔细深入，只要知道 componentShow 的作用就是，找到联动的 relationKey 的 config 中的 value 值，判断是否跟配置的一致。

computed: {

  componentShow () {

    const vIfArr = this.itemConfig?.options.vIf

    if (!vIfArr) return true

    const relationArr = this.config.filter(config => vIfArr.find(vIf => vIf.relationKey === config.formKey))

    for (const relationItem of relationArr) {

      const vIfItem = vIfArr.find(_ => _.relationKey === relationItem.formKey)

      // 这里就是判断 联动的表单值 是否不满足 可以显示 的条件，不满足则不显示

      if (relationItem.value !== vIfItem.value) return false

    }

    return true

  }

}

模拟实现 v-if，只需要把上述计算属性在 render 的开头进行判断即可

ok，直接看下结果！两个表单项之间的联动完成了

接下来的需求，大家自行思考下怎么实现即可。其实都是异曲同工的

控制 select 多选 、 单选添加 filter 属性 ...

好了，这样子，基本上就大功告成了，只要我们把 <code>FormItemDemo 的业务逻辑都实现了。

三、配置静态化

细心的朋友可能已经发现了，我们上述实现配置化的时候，直接把整个 config 赋值给 data ，然后在 App组件 的 el-form 中 v-for 使用，那这样避免不了就会出现一些尴尬的事情，比如我们看下图：

没错，就如大家所见，所有的属性都带上了 <code>getter 和 setter，这意味着，他们都被初始化成了响应式的。由于我们的业务是非常复杂的，所以当我们真的要用一个 config 去描述整个表单时，config 的规模远不止以上这么点，并且整个配置对象的层级可能还会比较深，如果这样的话就可能会有性能问题了。

熟悉 Vue2 的同学都知道，初始化的时候，会对 data 做一个深度遍历添加 get 、 set 变成响应时数据，并且在组件执行 render函数 时，会访问到这些对象的属性。一旦访问到，就会触发 data属性 的依赖收集动作，如果无脑多的属性时，这个 get方法 将被无脑执行。

有深入看过 Vue2 源码的同学，对 __ob__ 这个属性一定不陌生，上面截图也有这个属性，但是大家发现没，这个 ob属性 却没有对应的 get 、set 。让我们打开源码，看看 尤大 做了什么？

首先，在进行响应式处理之前，调用了一个 def 的方法，这里 第四个参数 是没传的

看看 def 的具体实现，其实就是重新定义这个对象的属性。由于没传 <code>enumerable，所以此时 __ob__的 enumerable 为 false

这样有什么用？一句话概括就是无法遍历到这个属性，后续响应式初始化时也会跳过这个属性。不清楚的伙伴可以看看笔者写的一个 <code>demo 来加深理解：

没错，我们这里也是采用同样的方式对我们的 config 进行 非响应式 优化。其实整个 config 数据，我们只是需要保证 value 是响应式的即可，其他很多描述性数据都是大可不必的。那我们就把其他字段进行一个优化～

// 优化函数

function optimize (array) {

  return array.reduce((acc, cur) => {

    for (const key of Object.keys(cur)) {

      if (key === 'value') continue

      // 将不是 value 的属性都进行非响应式优化

      Object.defineProperty(cur, [key], { enumerable: false })

    }

    acc.push(cur)

    return acc

  }, [])

}