Formily多框架支持：Vue 2/Vue 3/React Native集成指南

本文详细介绍了Formily在Vue 2、Vue 3和React Native框架中的集成方案和技术实现。内容涵盖Vue适配器的架构设计、双版本兼容机制、响应式集成、React Native移动端开发的最佳实践，以及跨框架开发的核心经验和注意事项，为开发者提供全面的多框架表单解决方案指南。

@formily/vue：Vue框架适配器设计

Formily 的 Vue 适配器 @formily/vue 是一个精心设计的框架集成层，它通过巧妙的架构设计实现了 Vue 2 和 Vue 3 的无缝兼容。这个适配器不仅提供了完整的 Formily 核心功能，还充分考虑了 Vue 生态的特点，为开发者提供了符合 Vue 开发习惯的 API 设计。

核心架构设计

@formily/vue 采用了分层架构设计，主要包含以下几个核心模块：

classDiagram
    class VueAdapter {
        +Components Layer
        +Hooks Layer
        +Shared Utilities
        +Type Definitions
    }
    
    class Components {
        +FormProvider
        +FormConsumer
        +SchemaField
        +ReactiveField
        +ArrayField
        +ObjectField
        +VoidField
        +RecursionField
    }
    
    class Hooks {
        +useForm()
        +useField()
        +useFieldSchema()
        +useFormEffects()
        +useParentForm()
    }
    
    class Shared {
        +Context System
        +createForm()
        +connect()
        +h() function
    }
    
    VueAdapter --> Components
    VueAdapter --> Hooks
    VueAdapter --> Shared

双版本兼容机制

@formily/vue 通过 vue-demi 库实现了 Vue 2 和 Vue 3 的自动适配，这是其架构设计中最巧妙的部分：

// 使用 vue-demi 自动选择正确的 Vue 版本
import { ref, inject, computed } from 'vue-demi'

// 组件定义采用兼容性写法
export const FormProvider = {
  name: 'FormProvider',
  setup(props, { slots }) {
    provide(FormSymbol, ref(props.form))
    return () => slots.default?.()
  }
}

响应式集成设计

Vue 适配器深度集成了 Vue 的响应式系统，确保 Formily 的响应式状态能够与 Vue 组件完美协同：

// useField hook 实现
export const useField = <T = GeneralField>(): Ref<T> => {
  return inject(FieldSymbol, ref()) as any
}

// 在组件中使用
const field = useField()
const value = computed(() => field.value?.value)

上下文注入系统

适配器设计了一套完整的依赖注入系统，基于 Vue 的 provide/inject API：

flowchart TD
    A[FormProvider] -->|provide| B[Form实例]
    B -->|inject| C[FormConsumer]
    B -->|inject| D[SchemaField]
    B -->|inject| E[useForm Hook]
    
    F[Field组件] -->|provide| G[Field实例]
    G -->|inject| H[useField Hook]
    G -->|inject| I[子字段组件]

上下文定义采用了 Symbol 作为注入键，避免了命名冲突：

export const FormSymbol: InjectionKey<Ref<Form>> = Symbol('form')
export const FieldSymbol: InjectionKey<Ref<GeneralField>> = Symbol('field')
export const SchemaSymbol: InjectionKey<Ref<Schema>> = Symbol('schema')

组件连接器模式

@formily/vue 实现了高效的组件连接机制，通过 connect 高阶函数将 Vue 组件与 Formily 字段绑定：

// connect 函数实现
export function connect<T extends Record<string, any>>(
  component: T,
  getProps?: (field: GeneralField) => Record<string, any>
) {
  return {
    ...component,
    setup(props: Record<string, any>) {
      const fieldRef = useField()
      const fieldProps = computed(() => 
        getProps?.(fieldRef.value) || {}
      )
      
      return {
        ...props,
        ...fieldProps.value
      }
    }
  }
}

Schema 驱动渲染

适配器实现了完整的 JSON Schema 渲染能力，支持递归渲染和动态表单生成：

// RecursionField 组件核心逻辑
const RecursionField = {
  name: 'RecursionField',
  props: ['schema', 'name', 'basePath'],
  setup(props) {
    const schemaRef = computed(() => 
      props.schema || Schema.isSchemaInstance(props.schema) 
        ? props.schema 
        : new Schema(props.schema)
    )
    
    return () => {
      const schema = schemaRef.value
      if (schema?.type === 'object') {
        return h(ObjectField, { schema, name: props.name })
      } else if (schema?.type === 'array') {
        return h(ArrayField, { schema, name: props.name })
      } else {
        return h(Field, { schema, name: props.name })
      }
    }
  }
}

性能优化策略

Vue 适配器采用了多种性能优化策略：

1. 按需响应：只有真正变化的字段才会触发组件更新
2. 批量更新：对多个字段的更新进行批处理，减少不必要的渲染
3. 记忆化计算：对派生状态进行缓存，避免重复计算

// 使用 computed 进行记忆化
const fieldProps = computed(() => {
  const field = fieldRef.value
  if (!field) return {}
  
  return {
    value: field.value,
    errors: field.errors,
    warnings: field.warnings,
    disabled: field.disabled,
    loading: field.loading,
    // ... 其他字段属性
  }
})

类型安全设计

适配器提供了完整的 TypeScript 类型定义，确保开发时的类型安全：

// 完整的类型定义体系
export interface ISchemaFieldVueFactoryOptions {
  components?: Record<string, any>
  scope?: Record<string, any>
  // ... 其他配置选项
}

export interface FieldComponentProps {
  value?: any
  onChange?: (value: any) => void
  disabled?: boolean
  // ... 其他标准属性
}

扩展性设计

架构设计充分考虑了扩展性，开发者可以轻松地自定义组件和扩展功能：

// 自定义组件注册
const createSchemaField = (options: ISchemaFieldVueFactoryOptions) => {
  return {
    components: {
      ...defaultComponents,
      ...options.components
    },
    scope: {
      ...defaultScope,
      ...options.scope
    }
  }
}

这种设计使得 @formily/vue 不仅能够满足基本的表单需求，还能够适应各种复杂的业务场景，为 Vue 开发者提供了强大而灵活的表单解决方案。通过精心的架构设计和实现，它成功地将 Formily 的核心能力与 Vue 框架的优雅特性完美结合。

Vue 2与Vue 3的兼容性处理

Formily通过精心设计的架构和工具链，实现了对Vue 2和Vue 3的无缝兼容支持。这种兼容性处理不仅体现在API层面，更深入到响应式系统、组件渲染和类型定义等多个层面。

核心兼容性架构

Formily采用分层架构来处理Vue版本兼容性问题，主要包含以下几个关键部分：

graph TD
    A[Vue应用] --> B[vue-demi桥接层]
    B --> C{Vue版本检测}
    C -->|Vue 2| D[Vue 2兼容层]
    C -->|Vue 3| E[Vue 3原生实现]
    D --> F[Composition API polyfill]
    D --> G[Vue 2响应式适配]
    E --> H[Vue 3 Composition API]
    E --> I[Vue 3响应式系统]
    F & G & H & I --> J[Formily核心组件]

vue-demi桥接层

Formily使用vue-demi作为核心桥接工具，它提供了统一的API接口来屏蔽Vue版本差异：

// 版本检测示例
import { isVue2 } from 'vue-demi'

const compatibleCreateElement = (tag, data, components) => {
  if (isVue2) {
    // Vue 2兼容逻辑
    const hInVue2 = h as (tag, data?, components?) => VNode
    // 处理scopedSlots和slots映射
    return hInVue2(tag, formatVue2Data(data), components)
  } else {
    // Vue 3原生逻辑
    const hInVue3 = h as (tag, data?, components?) => VNode
    return hInVue3(tag, formatVue3VNodeData(data), components)
  }
}

组件渲染兼容性

在组件渲染层面，Formily实现了智能的VNode处理机制：

// 统一的h函数实现
export const compatibleCreateElement = (
  tag: Tag,
  data: VNodeData,
  components: RenderChildren
): any => {
  if (isVue2) {
    // Vue 2特有的scopedSlots处理
    const scopedSlots = components
    const children = []
    
    Object.keys(components).forEach((key) => {
      const func = components[key]
      if (typeof func === 'function' && func.length === 0) {
        try {
          const child = func()
          children.push(
            key === 'default' 
              ? child 
              : hInVue2(FragmentComponent, { slot: key }, [child])
          )
        } catch (error) {}
      }
    })
    
    return hInVue2(tag, newData, children)
  } else {
    // Vue 3的直接渲染
    return hInVue3(tag, formatVue3VNodeData(data), components)
  }
}

响应式系统适配

Formily的响应式系统也针对不同Vue版本进行了适配：

// reactive-vue包中的observer实现
import { isVue2 } from 'vue-demi'
import { observer as observerV2 } from './observerInVue2'
import { observer as observerV3 } from './observerInVue3'

export function observer<C>(baseComponent: C, options?: IObserverOptions): C {
  if (isVue2) {
    return observerV2(baseComponent, options)  // Vue 2响应式适配
  } else {
    return observerV3(baseComponent, options)  // Vue 3响应式实现
  }
}

类型定义系统

Formily构建了完整的类型定义体系来支持双版本：

类型定义文件	Vue 2支持	Vue 3支持	描述
vue2-components.ts	✅	❌	Vue 2专用组件类型
通用类型文件	✅	✅	跨版本通用类型
条件类型导出	动态切换	动态切换	根据版本自动切换

// 类型条件导出示例
type DefineComponent<Props> = Vue & VueConstructor & Props

const Field = _Field as unknown as DefineComponent<Omit<IFieldProps, 'name'>>
const ArrayField = _ArrayField as unknown as DefineComponent<Omit<IArrayFieldProps, 'name'>>

构建时版本切换

Formily在构建阶段通过智能脚本实现版本切换：

// postinstall.js - 自动版本检测
const Vue = loadModule('vue')

try {
  if (Vue.version.startsWith('2.')) {
    switchVersion(2)  // 切换到Vue 2类型定义
  } else if (Vue.version.startsWith('3.')) {
    switchVersion(3)  // 切换到Vue 3类型定义
  }
} catch (err) {
  // 优雅降级处理
}

开发最佳实践

为了确保代码在双版本环境下的兼容性，Formily遵循以下实践：

1. 抽象公共逻辑：将版本无关的逻辑提取到共享模块
2. 条件导入：使用动态导入处理版本特定的依赖
3. 统一API接口：通过适配器模式提供一致的开发体验
4. 类型安全：完善的TypeScript类型定义确保编译时检查

// 示例：版本无关的组件实现
export default defineComponent({
  name: 'FormProvider',
  inheritAttrs: false,
  props: ['form'],
  setup(props: IProviderProps, { slots }) {
    // 使用vue-demi提供的统一API
    const formRef = useAttach(toRef(props, 'form'))
    provide(FormSymbol, formRef)
    
    return () => h(Fragment, {}, slots)  // 使用兼容的h函数
  },
})

版本特定优化

针对不同Vue版本的特点，Formily进行了针对性的优化：

Vue 2优化策略：

• Composition API polyfill集成
• 性能优化的scopedSlots处理
• 兼容Vue 2的响应式侦测

Vue 3优化策略：

• 原生Composition API利用
• Fragment组件的优化使用
• 更好的Tree-shaking支持

这种精细化的兼容性处理使得开发者可以在不同Vue版本间无缝迁移，无需修改业务逻辑代码，真正实现了"编写一次，到处运行"的开发体验。

React Native移动端表单开发

Formily为React Native移动端开发提供了强大的表单解决方案，通过其分布式状态管理和高性能渲染机制，完美解决了移动端表单开发中的性能瓶颈和复杂业务场景挑战。

React Native环境适配原理

Formily通过环境检测机制自动适配React Native运行环境。在render.ts文件中，Formily会检测globalThisPolyfill.navigator?.product === 'ReactNative'来判断当前是否运行在React Native环境中：

export const render = (element: React.ReactElement) => {
  if (globalThisPolyfill.navigator?.product === 'ReactNative') return null
  // 其他环境处理逻辑
}

这种设计确保了Formily在React Native中不会尝试使用DOM相关的API，避免了运行时错误。

移动端表单开发最佳实践

1. 基础表单配置

在React Native中使用Formily需要安装必要的依赖包：

npm install @formily/core @formily/react @formily/json-schema
# 或使用yarn
yarn add @formily/core @formily/react @formily/json-schema

2. 表单组件封装

由于React Native使用原生组件而非HTML元素，需要为移动端封装专门的表单组件：

import React from 'react'
import { View, Text, TextInput, Switch, Button } from 'react-native'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import { Schema } from '@formily/json-schema'

// 移动端专用的表单组件
const MobileInput = (props) => (
  <TextInput
    style={{ borderWidth: 1, padding: 8, marginVertical: 4 }}
    {...props}
  />
)

const MobileSwitch = (props) => (
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Text>{props.title}</Text>
    <Switch {...props} />
  </View>
)

const FormButton = (props) => (
  <Button title={props.children} onPress={props.onPress} />
)

// 创建SchemaField组件
const SchemaField = createSchemaField({
  components: {
    Input: MobileInput,
    Switch: MobileSwitch,
    Button: FormButton,
  },
})

3. JSON Schema驱动开发

使用JSON Schema可以更好地管理移动端表单的复杂布局和数据流：

const formSchema = {
  type: 'object',
  properties: {
    userInfo: {
      type: 'object',
      'x-decorator': 'FormItem',
      'x-component': 'Card',
      properties: {
        username: {
          type: 'string',
          title: '用户名',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
          'x-component-props': {
            placeholder: '请输入用户名',
          },
        },
        email: {
          type: 'string',
          title: '邮箱',
          required: true,
          'x-validator': 'email',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
          'x-component-props': {
            keyboardType: 'email-address',
          },
        },
        notifications: {
          type: 'boolean',
          title: '接收通知',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
      },
    },
    submit: {
      type: 'void',
      'x-component': 'Button',
      'x-component-props': {
        children: '提交',
        onPress: '{{() => form.submit()}}',
      },
    },
  },
}

性能优化策略

1. 字段级渲染优化

Formily的分布式状态管理确保只有变化的字段才会重新渲染，这在移动端尤其重要：

const form = createForm({
  validateFirst: true, // 首次验证失败即停止
  effects: (form) => {
    // 副作用逻辑
  },
})

2. 虚拟列表支持

对于长列表表单，建议使用React Native的虚拟列表组件：

import { FlatList } from 'react-native'

const VirtualFormList = ({ data }) => (
  <FlatList
    data={data}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => (
      <SchemaField schema={item.schema} />
    )}
    initialNumToRender={10}
    maxToRenderPerBatch={5}
    windowSize={7}
  />
)

复杂业务场景处理

1. 多步骤表单

const multiStepSchema = {
  type: 'object',
  properties: {
    step1: {
      type: 'object',
      'x-component': 'StepForm',
      properties: {
        // 第一步表单字段
      },
    },
    step2: {
      type: 'object',
      'x-component': 'StepForm',
      properties: {
        // 第二步表单字段
      },
    },
  },
}

2. 动态表单生成

const generateDynamicForm = (config) => {
  return {
    type: 'object',
    properties: config.fields.reduce((acc, field) => {
      acc[field.name] = {
        type: field.type,
        title: field.label,
        'x-component': field.component,
        'x-component-props': field.props,
      }
      return acc
    }, {}),
  }
}

状态管理与数据流

Formily在React Native中的状态管理流程如下：

flowchart TD
    A[用户交互] --> B[字段状态变更]
    B --> C[Formily响应式系统]
    C --> D[分布式状态更新]
    D --> E[仅相关字段重渲染]
    E --> F[UI更新]
    
    G[JSON Schema] --> H[表单结构定义]
    H --> I[组件映射]
    I --> J[渲染引擎]
    J --> K[原生组件渲染]

表单验证与错误处理

移动端表单验证需要特别的用户体验考虑：

const mobileValidators = {
  phone: (value) => {
    if (!/^1[3-9]\d{9}$/.test(value)) {
      return '请输入有效的手机号码'
    }
  },
  required: (value) => {
    if (!value || value.trim() === '') {
      return '该字段为必填项'
    }
  },
}

// 在表单配置中使用
const form = createForm({
  validateFirst: true,
  effects: (form) => {
    form.setFieldState('phone', (state) => {
      state.validator = mobileValidators.phone
    })
  },
})

响应式设计与适配

针对不同移动设备尺寸的表单适配：

import { Dimensions } from 'react-native'

const { width } = Dimensions.get('window')

const responsiveSchema = {
  type: 'object',
  properties: {
    field1: {
      type: 'string',
      'x-component': 'Input',
      'x-component-props': {
        style: {
          width: width > 768 ? '50%' : '100%',
        },
      },
    },
  },
}

调试与开发工具

虽然React Native环境不支持Formily的Chrome扩展，但可以使用以下调试方法：

// 开发环境调试
if (__DEV__) {
  form.subscribe((formState) => {
    console.log('Form State:', formState)
  })
  
  // 监听字段变化
  form.query('*').subscribe((fieldState) => {
    console.log('Field State:', fieldState)
  })
}

实际应用案例

以下是一个完整的用户注册表单示例：

import React from 'react'
import { View, ScrollView } from 'react-native'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { Schema } from '@formily/json-schema'

const registerSchema = {
  type: 'object',
  properties: {
    username: {
      type: 'string',
      title: '用户名',
      required: true,
      'x-component': 'Input',
      'x-component-props': {
        placeholder: '3-20个字符',
        maxLength: 20,
      },
    },
    password: {
      type: 'string',
      title: '密码',
      required: true,
      'x-component': 'Input',
      'x-component-props': {
        secureTextEntry: true,
        placeholder: '至少6位字符',
      },
    },
    confirmPassword: {
      type: 'string',
      title: '确认密码',
      required: true,
      'x-component': 'Input',
      'x-component-props': {
        secureTextEntry: true,
      },
    },
    agreement: {
      type: 'boolean',
      title: '同意用户协议',
      required: true,
      'x-component': 'Switch',
    },
    submit: {
      type: 'void',
      'x-component': 'Button',
      'x-component-props': {
        children: '注册',
        onPress: '{{() => handleSubmit()}}',
      },
    },
  },
}

const RegisterForm = () => {
  const form = createForm()
  const SchemaField = createSchemaField({
    components: {
      Input: MobileInput,
      Switch: MobileSwitch,
      Button: FormButton,
    },
  })

  const handleSubmit = async () => {
    try {
      const values = await form.submit()
      console.log('注册数据:', values)
      // 处理注册逻辑
    } catch (error) {
      console.error('表单验证失败:', error)
    }
  }

  return (
    <ScrollView>
      <FormProvider form={form}>
        <SchemaField schema={registerSchema} />
      </FormProvider>
    </ScrollView>
  )
}

通过Formily的强大功能，React Native移动端表单开发变得更加高效和可维护，能够处理各种复杂的业务场景 while maintaining excellent performance on mobile devices.

跨框架开发的经验与注意事项

Formily作为一款支持多框架的表单解决方案，在Vue 2、Vue 3和React Native等不同框架间的开发经验值得深入探讨。以下是在跨框架开发过程中积累的关键经验和注意事项。

核心架构设计原则

Formily采用分层架构设计，将核心逻辑与框架适配层分离，这是实现多框架支持的基础：

graph TD
    A[Formily Core] --> B[React Adapter]
    A --> C[Vue 2 Adapter] 
    A --> D[Vue 3 Adapter]
    A --> E[React Native Adapter]
    
    B --> F[React Components]
    C --> G[Vue 2 Components]
    D --> H[Vue 3 Components]
    E --> I[React Native Components]

这种架构确保了：

• 核心逻辑复用：表单状态管理、验证逻辑、数据联动等核心功能只需实现一次
• 框架特性适配：各框架适配层充分利用对应框架的特性API
• 独立演进：各框架支持可以独立升级和维护

状态管理的一致性挑战

在不同框架中保持状态管理的一致性是最主要的挑战之一：

框架	状态管理机制	Formily适配方案
React	useState/useReducer	使用React Hooks封装
Vue 2	Vue.observable	Composition API polyfill
Vue 3	reactive/ref	原生Composition API
React Native	同React	共享React适配层

// 核心状态管理接口
interface FormState {
  values: Record<string, any>;
  errors: Record<string, string>;
  validating: Record<string, boolean>;
  // 其他状态字段...
}

// 各框架适配器需要实现统一的State接口
class FrameworkAdapter {
  abstract getState(): FormState;
  abstract setState(updater: (state: FormState) => FormState): void;
}

响应式系统的差异处理

不同框架的响应式机制存在显著差异，需要针对性地处理：

React的响应式特点：

• 基于不可变数据和重新渲染
• 需要显式调用setState触发更新
• 依赖Virtual DOM进行差异比较

Vue的响应式特点：

• 基于Proxy/Object.defineProperty的自动依赖追踪
• 数据变更自动触发更新
• 细粒度的依赖收集

适配策略对比：

flowchart TD
    A[数据变更] --> B{框架类型}
    B -->|React| C[手动触发setState]
    B -->|Vue| D[自动响应式更新]
    
    C --> E[组件重新渲染]
    D --> E
    
    E --> F[UI同步更新]

组件生命周期对齐

各框架生命周期钩子的对齐是跨框架开发的关键：

React生命周期	Vue 2等效	Vue 3等效	注意事项
useEffect	mounted + watch	onMounted + watchEffect	清理逻辑差异
useLayoutEffect	mounted	onMounted	执行时机不同
componentDidMount	mounted	onMounted	基本等效
componentWillUnmount	beforeDestroy	onUnmounted	清理时机一致

性能优化策略

跨框架开发中的性能优化需要针对不同框架特性：

React优化重点：

// 使用React.memo避免不必要的重新渲染
const MemoizedField = React.memo(FieldComponent, (prevProps, nextProps) => {
  // 精细控制重渲染条件
  return prevProps.value === nextProps.value && 
         prevProps.errors === nextProps.errors;
});

// 使用useCallback缓存回调函数
const handleChange = useCallback((value) => {
  form.setFieldValue(fieldName, value);
}, [form, fieldName]);

Vue优化重点：

// 利用Vue的响应式系统自动优化
const reactiveForm = reactive({
  values: {},
  errors: {},
  // 其他状态...
});

// 计算属性优化
const fieldError = computed(() => reactiveForm.errors[fieldName]);

类型系统的一致性

TypeScript类型定义需要兼顾各框架特性：

// 通用类型定义
interface FieldProps<T = any> {
  name: string;
  value?: T;
  defaultValue?: T;
  required?: boolean;
  validator?: ValidatorFunction;
  // 其他通用属性...
}

// 框架特定扩展
interface ReactFieldProps extends FieldProps {
  // React特定属性
  component?: React.ComponentType<any>;
}

interface VueFieldProps extends FieldProps {
  // Vue特定属性  
  component?: VueComponent;
}

开发工具和调试

跨框架开发需要统一的调试工具链：

调试策略：

• 开发统一的DevTools扩展
• 提供框架无关的日志系统
• 实现状态快照和回放功能

工具集成示例：

// 统一的调试工具接口
class FormilyDevTools {
  static log(message: string, data?: any): void {
    if (process.env.NODE_ENV === 'development') {
      console.log(`[Formily] ${message}`, data);
    }
  }
  
  static trackPerformance(name: string, callback: () => void): void {
    const start = performance.now();
    callback();
    const duration = performance.now() - start;
    this.log(`Performance - ${name}: ${duration.toFixed(2)}ms`);
  }
}

测试策略的统一

确保各框架实现的行为一致性：

// 通用测试工具
describe('Formily Cross-Framework Tests', () => {
  test('should have consistent validation behavior', () => {
    // 测试各框架的验证逻辑一致性
    testFramework('react', () => { /* React测试 */ });
    testFramework('vue2', () => { /* Vue 2测试 */ });
    testFramework('vue3', () => { /* Vue 3测试 */ });
  });
});

// 框架特定的测试适配器
function testFramework(framework: string, testFn: () => void) {
  describe(`${framework} specific tests`, () => {
    beforeEach(() => setupFramework(framework));
    testFn();
  });
}

版本管理和兼容性

跨框架支持的版本管理策略：

组件	版本策略	说明
@formily/core	独立版本	核心逻辑，保持稳定
@formily/react	跟随React	与React版本对齐
@formily/vue	跟随Vue	支持Vue 2和Vue 3
@formily/react-native	跟随RN	与React Native版本对齐

最佳实践总结

1. 抽象通用接口：定义框架无关的核心接口
2. 隔离框架特性：将框架特定代码封装在适配层
3. 统一测试套件：确保各框架行为一致性
4. 性能监控：针对不同框架实施特定的性能优化
5. 文档同步：保持各框架文档的同步更新

通过遵循这些经验和注意事项，开发者可以更高效地在Formily生态中进行跨框架开发，确保代码质量和用户体验的一致性。

Formily通过精心设计的架构实现了对Vue 2、Vue 3和React Native的无缝支持，其分层架构设计确保了核心逻辑的复用性，同时各框架适配层充分利用了对应框架的特性API。文章详细分析了状态管理一致性、响应式系统差异处理、组件生命周期对齐等关键技术挑战，并提供了相应的解决方案和最佳实践。这种跨框架支持能力使开发者能够在不同技术栈中保持一致的开发体验和表单行为，大大提升了开发效率和代码可维护性。