Vue3无构建场景下如何解耦列表与编辑弹窗数据流减少重复

核心思路是废弃双独立Vue应用的实现，将编辑弹窗收归主应用管理，配合组合式API抽离通用逻辑，从根源解决耦合和代码重复问题，全程不需要引入构建工具。

具体实现路径 #

1. 弹窗作为主应用内嵌组件 #

不需要为弹窗单独初始化Vue实例，直接将其注册为主应用下的子组件，所有状态流转都在同一个Vue响应式上下文内完成：

• 弹窗显隐状态、当前编辑条目索引、临时编辑表单数据统一存在主应用的响应式变量中
• 编辑现有条目时，传入目标条目的深拷贝作为弹窗初始值，避免未保存时直接修改列表原数据；新增条目时传入空的默认结构即可
• 弹窗仅通过事件向父组件传递保存/取消动作，不直接操作主应用的列表数据，数据修改逻辑统一收在主应用中
• 用Vue内置的<Teleport>组件把弹窗传送到body节点下，避免父元素的overflow:hidden、z-index层级干扰

基础实现代码参考：

<div id="app">
  <!-- 列表区域 -->
  <div v-for="(item, index) in items" :key="item.id">
    <!-- 快速编辑区域 直接绑定条目字段即可 -->
    <input v-model="item.title" />
    <button @click="openEditDialog(index)">弹窗编辑</button>
  </div>
  <button @click="openEditDialog()">新增条目</button>

  <!-- 编辑弹窗  Teleport挂载到body下规避层级问题 -->
  <Teleport to="body">
    <edit-dialog
      v-if="dialogVisible"
      :initial-data="editingData"
      @save="handleSave"
      @close="dialogVisible = false"
    />
  </Teleport>
</div>

<script type="module">
const { createApp, ref, structuredClone } = Vue
// 抽离两种编辑模式共用的逻辑 快速编辑/弹窗编辑直接复用
const useItemCommon = () => {
  const validateItem = (item) => item.title?.trim().length > 0
  const formatItem = (item) => ({...item, updateAt: Date.now()})
  return { validateItem, formatItem }
}

createApp({
  setup() {
    const items = ref([])
    const dialogVisible = ref(false)
    const editingIndex = ref(-1) // -1标记为新增模式
    const editingData = ref(null)
    const { validateItem, formatItem } = useItemCommon()

    const openEditDialog = (index = -1) => {
      editingIndex.value = index
      editingData.value = index > -1 
        ? structuredClone(items.value[index]) 
        : { title: '', content: '' }
      dialogVisible.value = true
    }

    const handleSave = (formData) => {
      if (!validateItem(formData)) return
      const finalData = formatItem(formData)
      if (editingIndex.value > -1) {
        items.value[editingIndex.value] = finalData
      } else {
        items.value.push({...finalData, id: Date.now()})
      }
      dialogVisible.value = false
    }

    return { items, dialogVisible, openEditDialog, handleSave }
  }
})
.component('edit-dialog', {
  props: ['initialData'],
  emits: ['save', 'close'],
  setup(props, { emit }) {
    const form = ref(structuredClone(props.initialData))
    // 直接复用抽离的公共逻辑 无代码重复
    const { validateItem } = useItemCommon()
    const submit = () => {
      if (!validateItem(form.value)) return
      emit('save', form.value)
    }
    return { form, submit }
  },
  template: `
    <div class="dialog-mask">
      <div class="dialog-body">
        <input v-model="form.title" placeholder="条目标题">
        <textarea v-model="form.content" placeholder="条目内容"></textarea>
        <button @click="submit">保存</button>
        <button @click="emit('close')">取消</button>
      </div>
    </div>
  `
})
.mount('#app')
</script>

2. 大文件拆分方案（无构建支持） #

如果项目体量变大不想把所有代码堆在单个HTML文件里，直接利用浏览器原生ES模块能力拆分即可：

• 把公共组合逻辑、弹窗组件分别拆成独立的.js文件，通过export导出
• 主页面通过加了type="module"属性的script标签，用import引入对应依赖即可，不需要任何打包工具

方案优势 #

• 彻底消除跨应用耦合：不需要手动获取两个应用实例互相赋值、篡改数据，所有状态更新走Vue响应式流程，不会出现状态不一致问题
• 零代码重复：校验规则、字段格式化、计算属性等通用逻辑只需要写一次，快速编辑、弹窗编辑场景可直接复用
• 维护成本低：后续调整字段、修改业务逻辑只需要改动一处，不需要在两个应用间同步代码
• 完全兼容现有开发模式：不需要引入Node、构建工具等额外依赖，和当前无构建浏览器端开发的模式完全匹配

内容的提问来源于stack exchange，提问作者Lea Verou