vue中怎么使用assign重置data數據

這篇文章主要介紹“vue中怎么使用assign重置data數據”，在日常操作中，相信很多人在vue中怎么使用assign重置data數據問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中怎么使用assign重置data數據”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

使用assign巧妙重置data數據

由于Object.assign()有上述特性，所以我們在Vue中可以這樣使用： 

Vue組件可能會有這樣的需求

在某種情況下，需要重置Vue組件的data數據。此時，我們可以通過this.$data獲取當前狀態下的data，通過this.$options.data()獲取該組件初始狀態下的data。

然后只要使用Object.assign(this.$data, this.$options.data())就可以將當前狀態的data重置為初始狀態

重置data的數據為初始狀態

1. 逐個賦值

<span ><code class="language-js"><span >...</span>
<span >data</span><span >(</span><span >)</span> <span >{</span>
    <span >return</span> <span >{</span>
        name<span >:</span> <span >''</span><span >,</span>
        sex<span >:</span> <span >''</span><span >,</span>
        desc<span >:</span> <span >''</span>
    <span >}</span>
<span >}</span>
<span >...</span>
 
<span >// 逐個賦值</span>
<span >this</span><span >.</span>name <span >=</span> <span >''</span>
<span >this</span><span >.</span>sex <span >=</span> <span >''</span>
<span >this</span><span >.</span>desc <span >=</span> <span >''</span>
 
</code></span>

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

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

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) 方法還可以用來合并對象：

<span ><code class="language-js"><span >const</span> o1 <span >=</span> <span >{</span> a<span >:</span> <span >1</span> <span >}</span><span >;</span>
<span >const</span> o2 <span >=</span> <span >{</span> b<span >:</span> <span >2</span> <span >}</span><span >;</span>
<span >const</span> o3 <span >=</span> <span >{</span> c<span >:</span> <span >3</span> <span >}</span><span >;</span>
 
<span >const</span> obj <span >=</span> Object<span >.</span><span >assign</span><span >(</span>o1<span >,</span> o2<span >,</span> o3<span >)</span><span >;</span>
console<span >.</span><span >log</span><span >(</span>obj<span >)</span><span >;</span> <span >// { a: 1, b: 2, c: 3 }</span>
console<span >.</span><span >log</span><span >(</span>o1<span >)</span><span >;</span>  <span >// { a: 1, b: 2, c: 3 }, 注意目標對象自身也會改變。</span>
</code></span>

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

<span ><code class="language-js"><span >const</span> o1 <span >=</span> <span >{</span> a<span >:</span> <span >1</span><span >,</span> b<span >:</span> <span >1</span><span >,</span> c<span >:</span> <span >1</span> <span >}</span><span >;</span>
<span >const</span> o2 <span >=</span> <span >{</span> b<span >:</span> <span >2</span><span >,</span> c<span >:</span> <span >2</span> <span >}</span><span >;</span>
<span >const</span> o3 <span >=</span> <span >{</span> c<span >:</span> <span >3</span> <span >}</span><span >;</span>
 
<span >const</span> obj <span >=</span> Object<span >.</span><span >assign</span><span >(</span><span >{</span><span >}</span><span >,</span> o1<span >,</span> o2<span >,</span> o3<span >)</span><span >;</span>
console<span >.</span><span >log</span><span >(</span>obj<span >)</span><span >;</span> <span >// { a: 1, b: 2, c: 3 } 屬性取最后一個對象的屬性</span></code></span>

到此，關于“vue中怎么使用assign重置data數據”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！