vue重置data的form对象及其如何重新渲染组件

  1. 将data恢复到初始状态
    this.$data // 组件当前data对象
    this.$options.data() // 组件初始化状态下的data对象
    Object.assign(this.$data, this.$options.data()) // 初始化data
    针对某个对象可以这么写,比如在表单提交后需要清空form
    Object.assign(this.form, this.$options.data().form) // 清空form

这里的 this.$options.data() 作为源对象, this.$data 作为目标对象。源对象覆盖并合并目标对象中的内容,即有则覆盖,无则添加。

  1. 重新渲染组件

方法一:v-if(可以重置生命周期)

虽然能实现重新渲染,但不推荐首选

方法二:给组件加key值【推荐】

通过修改key的值,就会重新渲染该组件

方法三:this.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容