【九月打卡】第2天 Vue3.0 +TS打造企业级组件库

课程名称：Vue3.0 + TS 打造企业级组件库
章节名称：第5章
讲师姓名：Jokcy
https://coding.imooc.com/learn/list/466.html

课程内容

第5章是讲复合性的复杂阶段的渲染过程，代码主要是使用了一个解析渲染节点的函数，然后通过跨层级数据的传递完成ObjectField的渲染。大致代码如下：

export default defineComponent {
  name: 'ObjectField',
  props: FiledPropsDefine,
  setup() {
    const context: any = inject(SchemaFormContextKey)
    const properties = schema.properties || {}
    return () => {
      const { SchemaItem } = context;
      return <div>Object Field</div>
    }
  }
}

其中复杂的数据类型包括数组和对象，使用retrieveSchema方法进行了深层次的递归，为了避免多次渲染，可以使用computed记录retrieveSchema返回的数据。
渲染ObjectField要避免引用可以使用webpack插件：circular-dependency-plugin。渲染的时候其实运用到了provide/inject的方法，对于数据节点的渲染可以利用composite API抽离逻辑。渲染单类型的数组数据会比固定长度数组的节点更加复杂，主要是处理数组的增加和删除操作。

课程收获

了解到了处理节点的递归操作，数据传递provide/inject的源码原理，和避免循环引用的方式。