vue使用assign巧妙重置data資料方式

2022-03-03 13:00:34

使用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 style="color:#000000"><code class="language-js"><span style="color:#99cc99">...</span>
<span style="color:#6699cc">data</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>
    <span style="color:#cc99cc">return</span> <span style="color:#999999">{</span>
        name<span style="color:#999999">:</span> <span style="color:#99cc99">''</span><span style="color:#999999">,</span>
        sex<span style="color:#999999">:</span> <span style="color:#99cc99">''</span><span style="color:#999999">,</span>
        desc<span style="color:#999999">:</span> <span style="color:#99cc99">''</span>
    <span style="color:#999999">}</span>
<span style="color:#999999">}</span>
<span style="color:#99cc99">...</span>
 
<span style="color:#999999">// 逐個賦值</span>
<span style="color:#cc99cc">this</span><span style="color:#999999">.</span>name <span style="color:#99cc99">=</span> <span style="color:#99cc99">''</span>
<span style="color:#cc99cc">this</span><span style="color:#999999">.</span>sex <span style="color:#99cc99">=</span> <span style="color:#99cc99">''</span>
<span style="color:#cc99cc">this</span><span style="color:#999999">.</span>desc <span style="color:#99cc99">=</span> <span style="color:#99cc99">''</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 style="color:#000000"><code class="language-js"><span style="color:#cc99cc">const</span> o1 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> a<span style="color:#999999">:</span> <span style="color:#f99157">1</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#cc99cc">const</span> o2 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> b<span style="color:#999999">:</span> <span style="color:#f99157">2</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#cc99cc">const</span> o3 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> c<span style="color:#999999">:</span> <span style="color:#f99157">3</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
 
<span style="color:#cc99cc">const</span> obj <span style="color:#99cc99">=</span> Object<span style="color:#999999">.</span><span style="color:#6699cc">assign</span><span style="color:#999999">(</span>o1<span style="color:#999999">,</span> o2<span style="color:#999999">,</span> o3<span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#6699cc">log</span><span style="color:#999999">(</span>obj<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#999999">// { a: 1, b: 2, c: 3 }</span>
console<span style="color:#999999">.</span><span style="color:#6699cc">log</span><span style="color:#999999">(</span>o1<span style="color:#999999">)</span><span style="color:#999999">;</span>  <span style="color:#999999">// { a: 1, b: 2, c: 3 }, 注意目標物件自身也會改變。</span>
</code></span>

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

<span style="color:#000000"><code class="language-js"><span style="color:#cc99cc">const</span> o1 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> a<span style="color:#999999">:</span> <span style="color:#f99157">1</span><span style="color:#999999">,</span> b<span style="color:#999999">:</span> <span style="color:#f99157">1</span><span style="color:#999999">,</span> c<span style="color:#999999">:</span> <span style="color:#f99157">1</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#cc99cc">const</span> o2 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> b<span style="color:#999999">:</span> <span style="color:#f99157">2</span><span style="color:#999999">,</span> c<span style="color:#999999">:</span> <span style="color:#f99157">2</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
<span style="color:#cc99cc">const</span> o3 <span style="color:#99cc99">=</span> <span style="color:#999999">{</span> c<span style="color:#999999">:</span> <span style="color:#f99157">3</span> <span style="color:#999999">}</span><span style="color:#999999">;</span>
 
<span style="color:#cc99cc">const</span> obj <span style="color:#99cc99">=</span> Object<span style="color:#999999">.</span><span style="color:#6699cc">assign</span><span style="color:#999999">(</span><span style="color:#999999">{</span><span style="color:#999999">}</span><span style="color:#999999">,</span> o1<span style="color:#999999">,</span> o2<span style="color:#999999">,</span> o3<span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#6699cc">log</span><span style="color:#999999">(</span>obj<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#999999">// { a: 1, b: 2, c: 3 } 屬性取最後一個物件的屬性</span></code></span>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。