Vue 重置data的數據為初始狀態操作

Posted on by

在某些情況下，需要重新使用data中的數據，但是data中的數據已經被各種表單、變量等賦值，那麼怎麼重置data的值呢？

1. 逐個賦值

...
data() {
 return {
 name: '',
 sex: '',
 desc: ''
 }
}
...
// 逐個賦值
this.name = ''
this.sex = ''
this.desc = ''

這個方法比較笨，當然也可以實現效果，但是一個一個去重新賦值比較麻煩而且代碼看起來也會比較亂。

下面這個方法肯定是你喜歡的，一行代碼搞定～

2. 使用Object.assign()

MDN關於該方法的介紹：Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。

用法： Object.assign(target, …sources)

第一個參數是目標對象，第二個參數是源對象，就是將源對象屬性復制到目標對象，返回目標對象

其中就是將一個對象的屬性copy到另一個對象

vue中：

this.$data 獲取當前狀態下的data

this.$options.data() 獲取該組件初始狀態下的data

所以，下面就可以將初始狀態的data復制到當前狀態的data，實現重置效果：

Object.assign(this.$data, this.$options.data())

當然，如果你隻想重置data中的某一個對象或者屬性：

this.form = this.$options.data().form

擴展

Object.assign(target, …sources) 方法還可以用來合並對象：

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 註意目標對象自身也會改變。

如果對象中含有相同屬性，取最後一個屬性：

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 } 屬性取最後一個對象的屬性

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。如有錯誤或未考慮完全的地方，望不吝賜教。

推薦閱讀：

    None Found