TMagic实战总结：从零开始构建高效可视化编辑器的那些坑与经验分享

为什么要对比这几个方案

最近在项目中用了TMagic，发现这玩意儿挺火的。我决定对比一下几种常见的技术方案，看看哪个更符合我的需求。主要对比的有TMagic、Vue Formily和Formily（React版）。其实我对这些方案都有点了解，但还是想从实际使用角度再深入对比一下。

谁更灵活？谁更省事？

先说结论吧，我个人觉得TMagic在灵活性和易用性上都还不错，但Vue Formily也不差。具体来说：

• TMagic：配置灵活，API接口多，可以自定义很多东西。
• Vue Formily：文档比较详细，社区支持也不错，但稍微有点复杂。
• Formily（React版）：React生态中的佼佼者，如果你是React开发者，这个肯定是首选。

核心代码就这几行

咱们先看下各个方案的核心代码，这样更有说服力。

TMagic 示例

import { createApp } from 'vue';
import TMagic from '@tmagic/design';

const app = createApp(App);
app.use(TMagic, {
  components: {
    // 自定义组件
  },
  fields: {
    // 自定义字段
  },
  plugins: [
    // 插件
  ],
});
app.mount('#app');

Vue Formily 示例

import { createApp } from 'vue';
import { createForm } from '@formily/vue';
import Formily from '@formily/antdv';

const form = createForm();
const app = createApp(App);
app.use(Formily);

app.mount('#app', () => {
  form.setValues({
    // 初始值
  });
});

Formily（React版）示例

import React from 'react';
import { createForm } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/react';
import { Input, Form } from 'antd';

const SchemaField = createSchemaField({
  components: {
    Input,
  },
});

const form = createForm();

const App = () => (
  <FormProvider form={form}>
    <SchemaField>
      {{
        title: '示例表单',
        type: 'object',
        properties: {
          field1: {
            title: '字段1',
            type: 'string',
            'x-component': 'Input',
          },
        },
      }}
    </SchemaField>
  </FormProvider>
);

export default App;

性能对比：差距比我想象的大

性能方面，我在几个不同的项目里都试了试，结果发现差距还挺大的。TMagic的性能表现不错，特别是在处理大量数据时。Vue Formily稍微慢一点，但也不是不能接受。Formily（React版）在React项目中表现最好，但如果你不是React开发者，可能需要一些时间去适应。

踩坑提醒：这三点一定注意

在使用这些方案的过程中，我遇到了一些坑，这里提醒一下大家：

• TMagic：配置文件稍微有点复杂，容易出错。记得仔细检查。
• Vue Formily：文档虽然详细，但有些地方没说清楚，需要自己摸索。比如某些高级功能的使用方法。
• Formily（React版）：React生态系统庞大，但学习曲线陡峭。如果不是很熟悉React，建议先从基础开始。

我的选型逻辑

综合考虑，我一般会根据项目的具体情况来选择。如果是Vue项目，我会优先考虑TMagic，因为它灵活且API丰富。如果是React项目，Formily（React版）无疑是最好的选择。Vue Formily也可以用，但相对来说，我觉得它更适合那些对Vue非常熟悉的开发者。

以上是我的对比总结，有不同看法欢迎评论区交流

这就是我这段时间对比TMagic、Vue Formily和Formily（React版）的一些心得。希望对你有所帮助。如果有更好的实现方式或者不同意见，欢迎在评论区交流讨论。后续我会继续分享这类博客，希望大家多多支持！