掌握Vue3 Composition组合的正确姿势与实战经验分享

项目初期的技术选型

这次的项目是一个在线表单构建工具，核心需求是让用户能动态添加各种表单组件。开始的时候我纠结过用传统的Options API还是新的Composition API，最后选择了Composition组合。为啥呢？因为这个项目要处理的逻辑太复杂了，光是表单验证规则就有几十种，再加上拖拽排序、动态渲染这些功能，如果用Options API写，methods和data会乱成一锅粥。

说实话，刚开始我对Composition API也不是特别熟悉，主要是Vue 3刚出来那会儿没太跟上节奏。但这次硬着头皮上了，发现还真是个正确的选择，虽然踩了不少坑，但也算值了。

最大的坑：性能问题

在实现表单组件动态添加功能时，我发现当用户添加超过50个组件时，页面就开始卡顿了。一开始我以为是DOM节点太多导致的，后来仔细排查才发现问题出在每个组件都单独调用了相同的验证逻辑。

这是最初写的代码：

import { ref } from 'vue'

export function useValidation() {
  const validate = (value) => {
    console.log('validating', value)
    return value.length > 0
  }
  return { validate }
}

看起来挺简单的对吧？但问题就出在这里：每个表单组件都在自己的setup函数里调用了useValidation，结果就是每添加一个组件就会重新创建一份验证逻辑，内存占用蹭蹭往上涨。

折腾了半天才发现，原来可以把验证逻辑抽出来做成共享的：

// validation.js
import { ref } from 'vue'

const validators = {}

export function useSharedValidation(id) {
  if (!validators[id]) {
    validators[id] = {
      validate: (value) => value.length > 0
    }
  }
  return validators[id]
}

// component.js
import { useSharedValidation } from './validation'

export default {
  setup(props) {
    const validator = useSharedValidation(props.id)
    return { validator }
  }
}

这么改完之后，性能问题基本解决了。不过这里要注意我踩过好几次坑：一定要给每个组件设置唯一的id，否则会出现验证逻辑串了的情况。

另一个难点：状态管理

表单的状态管理也是个大问题。最开始我是把所有状态都放在根组件里，通过props一层层往下传。结果就是每次修改都要从孙子组件emit到子组件，再emit到父组件，烦得要死。

后来改成用provide/inject配合Composition API：

// parentComponent.js
import { reactive, provide } from 'vue'

export default {
  setup() {
    const state = reactive({
      formData: {},
      updateField: (key, value) => {
        state.formData[key] = value
      }
    })
    provide('formState', state)
  }
}

// childComponent.js
import { inject } from 'vue'

export default {
  setup() {
    const formState = inject('formState')
    return { formState }
  }
}

这样改完之后清爽多了，组件之间的通信变得简单直接。不过这里有个小问题一直没完全解决：当表单特别复杂时，调试起来不太方便，因为状态分散在各个组件里。但我加了个简单的日志系统，基本能应付大部分情况：

const state = reactive({
  formData: {},
  updateField: (key, value) => {
    console.log(Updating ${key} to ${value})
    state.formData[key] = value
  }
})

最终的解决方案

经过几轮优化，最后的架构大概是这样的：每个表单组件都是一个独立的模块，使用Composition API组织内部逻辑；公共逻辑像验证、状态更新这些都抽出来做成可复用的hooks；状态管理用provide/inject来简化层级传递。

核心代码大概长这样：

// useForm.js
import { reactive } from 'vue'

export function useForm() {
  const state = reactive({
    fields: {},
    addField: (id, config) => {
      state.fields[id] = { ...config, value: '' }
    },
    updateField: (id, value) => {
      state.fields[id].value = value
    }
  })

  return { state }
}

// App.vue
import { useForm } from './useForm'

export default {
  setup() {
    const { state } = useForm()

    const addNewField = () => {
      const id = field-${Date.now()}
      state.addField(id, { type: 'text', label: '新字段' })
    }

    return { state, addNewField }
  }
}

整个方案虽然不是最优的，但胜在简单实用。特别是对于这种需要频繁迭代的项目来说，代码结构清晰比什么都重要。

回顾与反思

总的来说，这次使用Composition组合的经历让我学到了不少东西。做得比较好的地方是：及时重构避免了代码腐化，几个关键的性能问题也都找到了合适的解决方案。不过还有些可以改进的地方，比如状态管理这块，或许用Pinia会更规范一些，只是当时为了赶进度就没深入研究。

另外，虽然主要功能都实现了，但还有一些小问题没完全解决，比如：组件销毁时没有及时清理对应的验证器实例，这可能会造成轻微的内存泄漏。不过目前看来影响不大，等下次迭代再优化吧。

以上是我个人对这个Composition组合的完整讲解，有更优的实现方式欢迎评论区交流。这种技术真的很适合处理复杂的业务场景，建议大家可以尝试一下。