vue使用assign巧妙重置data數(shù)據(jù)方式

更新時間：2022年03月03日 11:15:33 作者：kaiking_g

這篇文章主要介紹了vue使用assign巧妙重置data數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用assign巧妙重置data數(shù)據(jù)

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

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

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

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

重置data的數(shù)據(jù)為初始狀態(tài)

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>

這個方法比較笨，當然也可以實現(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) 方法還可以用來合并對象：

<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>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

在vue中使用express-mock搭建mock服務的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務的方法，文中給大家提到了在vue-test-utils 中 mock 全局對象的相關知識 ,需要的朋友可以參考下
2018-11-11
vue.js項目使用原生js實現(xiàn)移動端的輪播圖
這篇文章主要為大家介紹了vue.js項目中使用原生js實現(xiàn)移動端的輪播圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-04-04
Vue3路由進階實戰(zhàn)教程之參數(shù)傳遞與導航守衛(wèi)核心技術
本文介紹了路由參數(shù)傳遞的進階應用技巧,包括路由配置與參數(shù)驗證、組件參數(shù)接收、查詢參數(shù)傳遞、導航守衛(wèi)以及性能優(yōu)化與最佳實踐,感興趣的朋友一起看看吧
2025-03-03
Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個新需求：列表輪播滾動,實現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實現(xiàn),于是我開始了嘗試,但是在這個過程中遇到了動態(tài)綁定style樣式不生效,所以本文介紹了Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法
2024-08-08
Vue實現(xiàn)根據(jù)hash高亮選項卡
這篇文章主要為大家詳細介紹了Vue實現(xiàn)根據(jù)hash高亮選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
Vue的H5頁面喚起支付寶支付功能
目前項目中比較常用的第三方支付無非就是支付寶支付和微信支付。下面介紹一下Vue中H5頁面如何使用支付寶支付。這篇文章主要介紹了Vue的H5頁面喚起支付寶支付,需要的朋友可以參考下
2019-04-04
淺談vue后臺管理系統(tǒng)權限控制思考與實踐
這篇文章主要介紹了淺談vue后臺管理系統(tǒng)權限控制思考與實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
vue3的自定義指令directives實現(xiàn)
本文主要介紹了vue3的自定義指令directives實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關于Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-03-03
解決vue?app.js/vender.js過大優(yōu)化啟動頁
這篇文章主要為大家介紹了解決vue?app.js/vender.js過大優(yōu)化啟動頁過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10