vue使用assign巧妙重置data数据方式

更新时间：2022年03月03日 11:15:33 作者：kaiking_g

这篇文章主要介绍了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 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

在vue中使用express-mock搭建mock服务的方法
这篇文章主要介绍了在vue中使用express-mock搭建mock服务的方法，文中给大家提到了在vue-test-utils 中 mock 全局对象的相关知识 ,需要的朋友可以参考下
2018-11-11
vue.js项目使用原生js实现移动端的轮播图
这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
Vue3路由进阶实战教程之参数传递与导航守卫核心技术
本文介绍了路由参数传递的进阶应用技巧,包括路由配置与参数验证、组件参数接收、查询参数传递、导航守卫以及性能优化与最佳实践,感兴趣的朋友一起看看吧
2025-03-03
Vue实现无限轮播效果时动态绑定style失效的解决方法
最近在开发中遇到了一个新需求：列表轮播滚动,实现方式也有很多,比如使用第三方插件,但是由于不想依赖第三方插件,想自己实现,于是我开始了尝试,但是在这个过程中遇到了动态绑定style样式不生效,所以本文介绍了Vue实现无限轮播效果时动态绑定style失效的解决方法
2024-08-08
Vue实现根据hash高亮选项卡
这篇文章主要为大家详细介绍了Vue实现根据hash高亮选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
Vue的H5页面唤起支付宝支付功能
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。这篇文章主要介绍了Vue的H5页面唤起支付宝支付,需要的朋友可以参考下
2019-04-04
浅谈vue后台管理系统权限控制思考与实践
这篇文章主要介绍了浅谈vue后台管理系统权限控制思考与实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vue3的自定义指令directives实现
本文主要介绍了vue3的自定义指令directives实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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过大优化启动页
这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10