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数据”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！