vue3中实现弹窗表单的创建和编辑

假设（绝大部分需求）一个 list 需要有创建 item 和编辑 item 的需求，创建和编辑用的都是弹窗，那么根据正常 vue 的写法如下

<template>
    ...
    <div v-for="item of list">
        {{ item }}
        <button @click="handleEdit(item)">编辑</button>
    </div>
    <button @click="handleCreate()">新建</button>
    <Dialog>
        <Form>...</Form>
    </Dialog>
    ...
</template>
<script setup>
import { reactive } from 'vue'

const FORM_TEMPLATE = {data1: '', data2: ''}

const form = reactive(FORM_TEMPLATE)

function handleCreate() {
    // 由于reactive直接赋值会丢失响应式的缘故，故用非替换的方式去改变reactive的内容
    Object.assign(form, FORM)
}

function handleEdit(item) {
    // 由于reactive直接赋值会丢失响应式的缘故，故用非替换的方式去改变reactive的内容
    Object.assign(form, item)
}
</script>

不过这样会导致一个问题，就是当 handleEdit 完后，再 handleCreate 时，form 就不能变成 FORM_TEMPLATE 了。因为 FORM_TEMPLATE 与 form 是同一个引用，assign form 的时候相当于 assign FORM_TEMPLATE，故需要将 form 和 FORM_TEMPLATE 的引用解开如下：

const form = reactive({...FORM_TEMPLATE})