如何使vue组件的data属性重置为初始值？

本文共计596个文字，预计阅读时间需要3分钟。

1. 将data恢复到初始状态：使用Object.assign将this.$data与this.$options.data()合并，实现初始化data。这里的this.$options.data()作为源对象，this.$data作为目标对象。源对象的内容覆盖并合并到目标对象中，实现数据的初始化。

1. 将data恢复到初始状态

Object.assign(this.$data, this.$options.data()) // 初始化data

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

2. 重新渲染组件

方法一：v-if（可以重置生命周期）

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

方法二：给组件加key值

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

方法三：this.$forceUpdate()

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