Vue 重置data的數(shù)據為初始狀態(tài)操作
更新時間：2021年03月29日 14:38:46 作者：唐宋xy
這篇文章主要介紹了Vue 重置data的數(shù)據為初始狀態(tài)操作方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在某些情況下，需要重新使用data中的數(shù)據，但是data中的數(shù)據已經被各種表單、變量等賦值，那么怎么重置data的值呢？
1. 逐個賦值
...
data() {
return {
name: '',
sex: '',
desc: ''
}
}
...
// 逐個賦值
this.name = ''
this.sex = ''
this.desc = ''
這個方法比較笨，當然也可以實現(xiàn)效果，但是一個一個去重新賦值比較麻煩而且代碼看起來也會比較亂。
下面這個方法肯定是你喜歡的，一行代碼搞定～
2. 使用Object.assign()
MDN關于該方法的介紹：Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。
用法： Object.assign(target, ...sources)
第一個參數(shù)是目標對象，第二個參數(shù)是源對象，就是將源對象屬性復制到目標對象，返回目標對象
其中就是將一個對象的屬性copy到另一個對象
vue中：
this.$data 獲取當前狀態(tài)下的data
this.$options.data() 獲取該組件初始狀態(tài)下的data
所以，下面就可以將初始狀態(tài)的data復制到當前狀態(tài)的data，實現(xiàn)重置效果：
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 } 屬性取最后一個對象的屬性
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。如有錯誤或未考慮完全的地方，望不吝賜教。
相關文章
這篇文章主要給大家介紹了關于Vue3中引入scss文件的方法步驟,在實際項目中,各種樣式往往有很多重復的情況,為了能夠使樣式的后續(xù)開發(fā)和維護更加愜意,將這些共同的代碼進行命名然后調用這些變量是一個很好的選擇,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中marker被識別點擊的過程場景分析,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要給大家介紹了關于vue過濾器filter的使用方法,Vue.js的過濾器(Filter)是一種可重用的功能,用于對文本進行格式化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
在本篇文章里小編給大家整理的是關于Vue代碼整潔之去重的相關知識點內容，需要的朋友們學習下。2019-08-08
Vue通過echarts實現(xiàn)數(shù)據圖表化顯示
Echarts，它是一個與框架無關的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在 Vue 中,深度監(jiān)聽是指監(jiān)聽一個對象或數(shù)組的嵌套屬性（深層結構）的變化,而不僅僅是監(jiān)聽頂層屬性的引用變化,本文給大家介紹了如何在Vue中實現(xiàn)深度監(jiān)聽,并通過代碼示例介紹的非常詳細,需要的朋友可以參考下2025-03-03
最近開發(fā)遇到一個點擊導入按鈕讓excel文件數(shù)據導入在表格的需求,所以下面這篇文章主要給大家介紹了關于vue導入處理Excel表格功能步驟的相關資料,需要的朋友可以參考下2022-07-07
響應式就是當對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關于Vue3響應式原理的相關資料,需要的朋友可以參考下2022-11-11
vue內置組件component--通過is屬性動態(tài)渲染組件操作
這篇文章主要介紹了vue內置組件component--通過is屬性動態(tài)渲染組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家介紹了c++游戲教程使用easyx實現(xiàn)大飛機示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08