vue data恢复初始化数据的实现方法


Posted in Javascript onOctober 31, 2019

在我们进行vue开发过程中,经常会保存一些页面,此时,我们在app.vue的配置如下,

<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>

以此来保存页面,那么在再次进入这些页面的时候,我们需要重置该页面的原始数据,那么该如何进行呢?是不是要讲每个数据进行重写,答案是否定的。利用Object.assign 以及vue的数据可以快速重置。

Object.assign(this.$data, this.$options.data())

Object.assign() ----详解

Object.assign(target, ...sources)

参数: target 目标对象。sources 源对象。

返回值:目标对象。

描述

如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下,例如,如果属性不可写,会引发TypeError,如果在引发错误之前添加了任何属性,则可以更改target对象。

注意,Object.assign 不会跳过那些值为 null 或 undefined 的源对象。

注意:针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。

以上这篇vue data恢复初始化数据的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
原生JS实现分页
Apr 19 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 #Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 #Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 #Javascript
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 #Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 #Javascript
关于vue表单提交防双/多击的例子
Oct 31 #Javascript
You might like
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
js实现双色球效果
2020/08/02 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Python线程同步的实现代码
2018/10/03 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
大学生自我鉴定评语
2014/01/27 职场文书
志愿者活动总结
2014/04/28 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
关于教师节的广播稿
2014/09/10 职场文书
圣诞晚会主持词
2015/07/01 职场文书