Vue 重置data的数据为初始状态操作
更新时间：2021年03月29日 14:38:46 作者：唐宋xy
这篇文章主要介绍了Vue 重置data的数据为初始状态操作方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在某些情况下，需要重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？
1. 逐个赋值
...
data() {
return {
name: '',
sex: '',
desc: ''
}
}
...
// 逐个赋值
this.name = ''
this.sex = ''
this.desc = ''
这个方法比较笨，当然也可以实现效果，但是一个一个去重新赋值比较麻烦而且代码看起来也会比较乱。
下面这个方法肯定是你喜欢的，一行代码搞定～
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) 方法还可以用来合并对象：
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
如果对象中含有相同属性，取最后一个属性：
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 } 属性取最后一个对象的属性
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。如有错误或未考虑完全的地方，望不吝赐教。
相关文章
这篇文章主要介绍了使用Vue写一个开心消消乐游戏，游戏算法在文中给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
ElementUI中el-dropdown-item点击事件无效问题
这篇文章主要介绍了ElementUI中el-dropdown-item点击事件无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了如何利用Vue3实现一个可左右滑动操作组件，文中的示例代码讲解详细，对我们学习Vue有一定帮助，感兴趣的可以学一下2022-11-11
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项2022-10-10
axios是一个基于Promise的，发送http请求的一个工具库，并不是vue中的第三方插件，使用时不能通过“Vue.use()”安装插件，需要在原型上进行绑定2023-04-04
今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue3将通用组件注册成全局组件的方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要给大家介绍了关于vue2.0/3.0响应式原理及区别的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了Vue 构造选项 - 进阶使用说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论