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 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Django中几种重定向方法
2015/04/28 Python
python动态参数用法实例分析
2015/05/25 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python使用requests.session模拟登录
2019/08/09 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
Python必须了解的35个关键词
2020/07/16 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
法律专业实习鉴定
2013/12/22 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
爽歪歪广告词
2014/03/20 职场文书
校园环保建议书
2014/05/14 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
2014年公司工作总结
2014/11/22 职场文书
教师节慰问信
2015/02/15 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书