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 相关文章推荐
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
node.js中的console用法总结
Dec 15 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
javascript的this关键字详解
May 20 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
jQuery 技巧小结
2010/04/02 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
python中pivot()函数基础知识点
2021/01/03 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
周年庆促销方案
2014/03/15 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
党内外群众意见范文
2015/06/02 职场文书
Python基本知识点总结
2022/04/07 Python