vue使用深拷贝后，只用this.$refs.form.resetFields()无法重置表单的问题

一、深拷贝与浅拷贝

        简单来说，深拷贝是在内存中开辟了一块地址用于存放拷贝的数据；而浅拷贝则是只是进行了引用，将地址指向了引用的对象。

        如果需要在表单中获取一个对象并进行修改，则需要使用深拷贝。这里假设使用了浅拷贝，则当你在表单中修改完数据时且未点击确认时，即使点击了取消，仍然会对原数据进行了修改。这是因为浅拷贝只是将地址指向了引用的对象，当在表单中进行修改时也会对原对象进行了修改。若对表单中获取的对象使用深拷贝时，则在点击取消后不会对原对象进行修改。

二、深拷贝产生的问题

        在使用elemen-ui时，我的同一个表单同时绑定了添加数据与修改数据的操作。在我修改完数据后，由于表单获取数据时使用了深拷贝，将原来的data中的属性改变了。因此，在我添加数据时，每次打开表单，都会是上一次修改数据时表单中的数据。而我有在每一次操作过后都使用this.$refs.form.resetFields()将表单重置，因此最开始我怀疑的是表单没有重置。但是在实验了多次过后，发现这不是表单重置的问题，而是因为使用了深拷贝导致了data中的对象改变了，从而在重置表单后，依旧将改变后的对象的值赋予了表单，从而导致了添加数据时表单依旧停留在上一次修改数据时的状态。

三、解决方法

        在使用this.$refs.form.resetFields()重置表单时，先将表单中的对象还原为初始状态，这就需要在created()状态中利用一个新的对象原来空的对象进行深拷贝，并在使用this.$refs.form.resetFields()前将改变了的对象通过深拷贝还原为空的对象，这样便能完成表单的重置了。

参考：vue使用深拷贝进行表单清空_vue深层拷贝如何清空-CSDN博客