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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
纯JS实现简单的日历
Jun 26 Javascript
js读取本地文件的实例
Dec 22 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python实现学生管理系统
2018/01/11 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python中return的返回和执行实例
2019/12/24 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
2014年预备党员学习两会心得体会
2014/03/17 职场文书
演讲稿格式范文
2014/05/19 职场文书
村党支部公开承诺书
2014/05/29 职场文书
一个独生女的故事观后感
2015/06/04 职场文书