vue中，从列表中选择一条数据，进行弹窗修改，如何实现最优雅？

Question

题目描述
列表中的数据，选中一条，点击修改，弹窗显示详情，可以进行修改，点击确定往后台传数据，点击取消关闭弹窗

Answer 1

整个项目用了自己写的组件还是像Element或者Vuetify之类的组件库？如果是组件库，那么绑定一个数据就可以显示或隐藏弹框，不用v-if（优雅了一点？）考虑使用lodash之类的库来进行pick、clone、deepClone深拷贝的时机不需要通过watchvisible来触发，点击“修改”按钮的时候就可以进行深拷贝时间处理可以在保存的时候进行，也不需要通过watch来触发总而言之，在点击“修改”的时候准备数据，并修改绑定到弹框的数据来显示弹框，点击保存的时候保存数据、隐藏弹框至于保存数据后或取消修改时，准备的数据是否要销毁，个人觉得可以不用销毁

Answer 2

我现在做的是在选中一行准备编辑的时候变量传递给弹窗组件.在弹窗组件中mounted的时候我使用的JSON.parse(JSON.stringify(xxx))来进行深拷贝,虽然这样对于非通常对象,比如Date,File有问题,不过一般来说编辑的数据不会包含这样类型.这样比起Object.assign,如果数据包含数组或者嵌套对象,不会出现引用问题而误修改原数据.弹窗组件只修改自己深拷贝过的值,提交和关闭都是传递给父级的事件,把之后的实际提交数据与实际关闭弹窗的动作都交由父级组件来完成.这样子组件的功能就比较单纯,方便模块化.