Vue中如何重置data?

244 阅读1分钟

为什么要重置data

在项目开发中,一般对于data中的数据被表单、赋值该表之后,需要重新使用data中的数据,那么我们要如何重置data的值呢?

1.重新赋值-- 手动去给表单双向绑定的对象赋值为空

data(){
    return{
        Notica:{
            title:"",
            content:"",
        }
    }
}
 
 
最直接的办法
this.Notica.title = ""
this.Notica.content = ""

但这种方法只在对象数量少的时候可以用一下,一个一个去重新赋值比较麻烦,而且代码看起来也会比较乱,并且如果我需要重置的对象很多怎么办,此时可以用另一种方法

2.使用Object.assign()

  1. Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。

  2. 用法:Object.assign(target, ...sources),第一个参数是目标对象,第二个参数是源对象,就是将源对象属性复制到目标对象,返回目标对象。

 this.$data 获取的是当前状态下的data对象 
 
this.$options.data() 获取该组件初始状态下的data
 
Object.assign 则可以将一个对象赋值给另一个对象
 
 
 
所以,下面就可以将初始状态的data复制到当前状态的data,实现重置效果:
 
Object.assign(this.$data, this.$options.data.call(this))