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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
python使用epoll实现服务端的方法
2018/10/16 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
幼儿园新年寄语
2014/04/03 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
《三国志》赏析
2019/08/27 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python