JSON.parse(JSON.stringify(this.form))解决el-form验证bug

根据问题找到的答案,记录下

在Element UI的el-form中,当进行表单验证时,可能会遇到某些情况下验证失败后,即使填写了必填项也会继续触发未填校验的问题。这通常是因为Vue的响应式系统在跟踪对象更改时存在一些限制。

通过执行this.form = JSON.parse(JSON.stringify(this.form))这句代码,实际上是对this.form对象进行了深拷贝,并将新的副本对象重新赋值给this.form。这样做的作用是解除了Vue响应式系统对原始数据对象的追踪,从而避免了由于追踪机制的限制导致的再次触发未填校验的问题。

具体来说,当你对原始的this.form对象进行修改时,Vue会追踪这些更改并更新页面。但是,在验证失败后,如果你直接修改原始的this.form对象,Vue可能无法正确地检测到这个更改,并且仍然会触发之前失败的验证。

通过执行深拷贝操作,你创建了一个与原始表单数据具有相同值的新对象,并将其重新赋值给this.form。这样,当你在重新验证表单时,Vue会追踪新对象的更改,并正确地验证填写的必填项。

需要注意的是,深拷贝操作会创建一个新的对象,对于大型表单数据或频繁进行的操作可能会带来一些性能开销。因此,仅在必要时执行深拷贝操作,以确保正确的验证结果。

总结起来,通过深拷贝并重新赋值给this.form对象,可以解除Vue响应式系统的追踪限制,从而避免在填写必填项后仍然触发未填校验的问题。

Vue的响应式追踪机制是Vue框架用于跟踪数据变化的核心特性。它允许Vue在数据发生更改时自动更新相关的视图。

当你在Vue中声明一个响应式数据对象时,Vue会使用ES5的Object.defineProperty方法将每个属性转换为getter和setter。这样,当你读取或修改这些属性时,Vue能够捕捉到对数据的访问和修改操作。

当数据对象的属性被读取时,Vue会建立一个依赖关系,将属性与使用了该属性的组件、计算属性等关联起来。这样,当属性的值发生变化时,Vue将会通知所有依赖于该属性的组件,从而触发更新相应的视图。这种响应式的更新机制使得你可以轻松地保持数据和视图之间的同步。

通过响应式追踪机制,Vue能够高效地进行精准的局部更新,而不需要重新渲染整个页面。只有受到更改影响的组件或视图部分才会重新渲染,从而提升了性能。

需要注意的是,响应式追踪机制只适用于已经在Vue实例创建过程中被添加到数据对象中的属性。如果在创建后再添加新的属性,Vue无法追踪该属性的变化。在这种情况下,你可以使用Vue.set(object, propertyName, value)方法来确保新属性也是响应式的。

总结一下,Vue的响应式追踪机制是通过将数据对象的属性转换为getter和setter来实现的。当属性被访问或修改时,Vue能够捕捉到这些操作,并通知相关的组件进行更新,实现数据与视图的自动同步。

猜你喜欢

转载自blog.csdn.net/gjylalaland/article/details/132060829