Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
在某些情況下，需要重新使用data中的數(shù)據(jù)，但是data中的數(shù)據(jù)已經(jīng)被各種表單、變量等賦值，那么怎么重置data的值呢？
1. 逐個(gè)賦值
...
data() {
return {
name: '',
sex: '',
desc: ''
}
}
...
// 逐個(gè)賦值
this.name = ''
this.sex = ''
this.desc = ''
這個(gè)方法比較笨，當(dāng)然也可以實(shí)現(xiàn)效果，但是一個(gè)一個(gè)去重新賦值比較麻煩而且代碼看起來(lái)也會(huì)比較亂。
下面這個(gè)方法肯定是你喜歡的，一行代碼搞定～
2. 使用Object.assign()
MDN關(guān)于該方法的介紹：Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
用法： Object.assign(target, ...sources)
第一個(gè)參數(shù)是目標(biāo)對(duì)象，第二個(gè)參數(shù)是源對(duì)象，就是將源對(duì)象屬性復(fù)制到目標(biāo)對(duì)象，返回目標(biāo)對(duì)象
其中就是將一個(gè)對(duì)象的屬性copy到另一個(gè)對(duì)象
vue中：
this.$data 獲取當(dāng)前狀態(tài)下的data
this.$options.data() 獲取該組件初始狀態(tài)下的data
所以，下面就可以將初始狀態(tài)的data復(fù)制到當(dāng)前狀態(tài)的data，實(shí)現(xiàn)重置效果：
Object.assign(this.$data, this.$options.data())
當(dāng)然，如果你只想重置data中的某一個(gè)對(duì)象或者屬性：
this.form = this.$options.data().form
擴(kuò)展
Object.assign(target, ...sources) 方法還可以用來(lái)合并對(duì)象：
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 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。
如果對(duì)象中含有相同屬性，取最后一個(gè)屬性：
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 } 屬性取最后一個(gè)對(duì)象的屬性
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教。
相關(guān)文章
vue中簡(jiǎn)單彈框dialog的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue中簡(jiǎn)單彈框dialog的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Vue?各種loader的基本配置與使用，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
vite前端構(gòu)建Turborepo高性能monorepo方案
這篇文章主要為大家介紹了vite前端構(gòu)建Turborepo高性能monorepo方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue中的事件綁定問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
這篇文章主要介紹了vue頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開時(shí)縮小的代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開時(shí)縮小，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
在本篇文章中小編給大家分享了vue如何實(shí)現(xiàn)點(diǎn)擊隱藏與顯示的相關(guān)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要介紹了解決vue頁(yè)面渲染但dom沒(méi)渲染的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)文本展開收起功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04