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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 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时间戳与日期的转换
2013/06/06 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
python 字符串和整数的转换方法
2018/06/25 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
师生聚会感言
2014/01/26 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
推荐信格式要求
2014/05/09 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
七一建党节演讲稿
2014/09/11 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
文体活动总结
2015/02/04 职场文书
环境卫生整治简报
2015/07/20 职场文书