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

2024-04-02 19:04:59 955人浏览安东尼

摘要

目录使用assign巧妙重置data数据Vue组件可能会有这样的需求重置data的数据为初始状态1. 逐个赋值2. 使用Object.assign()扩展使用assign巧妙重置da

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

--结束END--

本文标题: vue使用assign巧妙重置data数据方式

本文链接: https://lsjlt.com/news/141172.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341