FormKit 在 Vue 3.5.x 版本下的组件卸载异常问题解析

问题背景

FormKit 是一个流行的 Vue 表单构建工具库，近期在升级到 Vue 3.5.x 版本后，部分用户报告了组件卸载时的异常问题。这个问题主要表现为当包含 FormKitSchema 组件的复杂应用在切换多个组件时，控制台会抛出"无法读取 null 属性"的错误。

问题现象

在 Vue 3.5.x 环境下，当组件卸载执行清理操作时，会触发以下错误：

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'node')

错误发生在 FormKitSchema 组件的 cleanUp 方法中，特别是在尝试访问 data.node 属性时。这个问题在 Vue 3.4 版本中并不存在，但在升级到 Vue 3.5 后开始出现。

问题根源分析

经过开发者调查，这个问题与 Vue 3.5 的生命周期管理变化有关。在 Vue 3.5 中，组件卸载时的清理顺序和时机可能发生了变化，导致在某些情况下，当 cleanUp 方法被调用时，data 对象已经被设置为 null。

具体到代码层面，问题出在 FormKitSchema.ts 文件中的 cleanUp 函数：

function cleanUp() {
  clean(props.schema, props.memoKey, instanceKey)
  if (data.node) data.node.destroy()
  data.slots = null!
  data = null!
  render = null!
}

在 Vue 3.5 下，data 可能在检查 data.node 之前就已经被设置为 null。

解决方案

FormKit 团队在 1.6.6 版本中修复了这个问题，修改后的代码如下：

function cleanUp() {
  clean(props.schema, props.memoKey, instanceKey)
  if (data?.node) {
    data.node.destroy()
  }
  if (data?.slots) {
    data.slots = null!
  }
  data = null!
  render = null!
}

主要修改是添加了可选链操作符(?.)来安全地访问可能为 null 的 data 对象的属性。

后续发现的相关问题

在修复发布后，部分用户（特别是使用 Nuxt 的用户）报告了另一个相关问题：当页面包含带有 help 属性的 FormKit 输入组件时，会出现"无法读取 null 属性"的错误，指向 Vue 的 reactivity 系统。

进一步调查发现，这个问题与 Vue 3.5.6 版本引入的 reactivity 系统变更有关。Vue 3.5.6 修改了 computed 属性的依赖检查机制，这影响了 FormKit 内部的状态管理。

临时解决方案包括：

1. 将 Vue 版本锁定在 3.5.5
2. 移除 @formkit/pro 依赖（如果不必要）
3. 等待 FormKit 的进一步更新

FormKit 团队在 1.6.7 版本中彻底解决了这个 reactivity 相关问题。

最佳实践建议

对于正在使用或计划使用 FormKit 的开发者，建议：

1. 确保所有 @formkit 相关包版本一致（最新稳定版）
2. 如果使用 Nuxt，特别注意版本兼容性
3. 在升级 Vue 3.5.x 前，先升级 FormKit 到最新版本
4. 对于生产环境，考虑锁定特定的小版本以避免意外问题

总结

这次问题展示了前端生态系统中依赖管理的复杂性，特别是当核心框架（Vue）进行更新时，可能对上层库（FormKit）产生连锁影响。FormKit 团队的快速响应和修复展示了良好的开源维护实践，同时也提醒开发者需要谨慎对待依赖升级，特别是在生产环境中。