vue data恢复初始化数据的实现方法

在我们进行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恢复初始化数据的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 使用formData方式向后台发送数据的实现

    很多时候在使用form向后台发送数据的时候,并不需要使用到表单组件. 例如时间戳.ip等,这个时候除了ajax之外,还可以使用HTML5的一个全新方法FormData:在input[type = file]的文件类型中,很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时,无法赋值给file文件,只能转换为base64类型传送到后台,然后由后台转换为图片再进行服务器存储:此过程较为复杂: 使用formdata,只需创建新的formdata对象,将要发送的数据添加进去,后台即可接收

  • vue中的数据绑定原理的实现

    vue中的数据绑定原理的实现

    本文主要介绍了vue中的数据绑定原理的实现,分享给大家,也给自己留个笔记,具体如下: vue中的响应式数据绑定是通过数据劫持和观察者模式来实现的.当前学习源码为vue2.0 源码关键目录 src |---core | |---instance | |---init.js | |---state.js | |---observer | |---dep.js | |---watcher.js 当我们实例化一个vue应用的时候,会伴随着各种的初始化工作,相关的初始化工作代码在init.js文件中 //

  • 解决vuex刷新状态初始化的方法实现

    vuex五种基本对象 state:存储状态(变量) getters:对数据获取之前的再次编译,可以理解为state的计算属性.我们在组件中使用$sotre.getters.fun() mutations:修改状态,并且是同步的.在组件中使用$store.commit('',params).这个和我们组件中的自定义事件类似. actions:异步操作.在组件中使用是$store.dispath('') modules:store的子模块,为了开发大型项目,方便状态管理而使用的.这里我们就不解释了,

  • 解决vue接口数据赋值给data没有反应的问题

    问题: 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('xxxxxxxxxxxx', {}, (res) => { if (is.object(res)) { if (res.status === 'succ') { this.slides = re

  • 使用Vue实现调用接口加载页面初始数据

    闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现. let vm = new Vue({ el:'#content', data:{ name:'', pic:'', actor:'', detail:'', link:'' }, mounted:function () { this.getMovie(); }, methods:{ getMovie:function () { var _this = this; let url = '/niuren/getRecommendFilm

  • vue 修改 data 数据问题并实时显示的方法

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初

  • vue data恢复初始化数据的实现方法

    在我们进行vue开发过程中,经常会保存一些页面,此时,我们在app.vue的配置如下, <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> 以此来保存页面,那么在再次进入这些页面的时候,我们需要重置该页面的原始数据,那么该如何进行呢?是不是要讲每个数据进行重写,答案是否定的.利用Object.assign 以及vue的数据可

  • 实例分析vue循环列表动态数据的处理方法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"

  • 浅谈Spring Data如何简化数据操作的方法

    Spring Data 概述 Spring Data 用于简化数据库访问,支持NoSQL 和 关系数据存储,其主要目标是使数据库的访问变得方便快捷. SpringData 项目所支持 NoSQL 存储: MongoDB (文档数据库) Neo4j(图形数据库) Redis(键/值存储) Hbase(列族数据库) SpringData 项目所支持的关系数据存储技术: JDBC JPA Spring Data JPA JPA Spring Data : 致力于减少数据访问层 (DAO) 的开发量.

  • 使用Spring Data Redis实现数据缓存的方法

    使用Spring Data Redis实现数据缓存的方法

    引言 目前很多系统为了解决数据读写的性能瓶颈,在系统架构设计中使用Redis实现缓存,Spring框架为了让开发人员更加方便快捷的使用Redis实现缓存,对Redis的操作进行了包装. 0.缓存 个人理解的缓存是指用于存储频繁使用的数据的空间,关注点是存储数据的空间和使用频繁的数据.缓存技术,简单的说就是先从缓存中查询数据是否存在,存在则直接返回,不存在再执行相应的操作获取数据,并将获取的数据存储到缓存中,它是一种提升系统性能的重要方法. 1.Redis Redis是一个开源的.内存存储key-

  • Vue使用Echarts实现数据可视化的方法详解

    Vue使用Echarts实现数据可视化的方法详解

    目录 一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Echarts 2.3 使用模板 2.4实例 2.4.1柱状图(折线图变换) 2.4.2极坐标柱状图标签 总结 一,Echarts 一个基于 JavaScript 的开源可视化图表库 Echarts官网 https://echarts.apache.org/zh/index.html 1.1 获取ECharts (1)从 npm 获取(项

  • js data日期初始化的5种方法

    创建一个日期对象: 复制代码 代码如下: var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh:mm:ss"); 2)new Date("month dd,yyyy"); 3)new Date(yyyy,mth,dd,hh,mm,ss); 在程序中我使用的第三种初始化方法,总是显示格式化的参数不正确,仔细看了一下一定要是整型的才可以,我传递的是字符串 4)new

  • MySQL中使用load data命令实现数据导入的方法

    使用方式如下: 复制代码 代码如下: mysql>load data local infile "D:/ab.txt" into table mytbl(name,age); 使用上述的命令就可以将D:/ab.txt文件的内容导入到表mytbl中,其中name和age是表mytbl的字段,对应ab.txt文件中每行的数据.如果编译安装mysql时没有指定 –enable-local-infile,那么在使用上述命令时会报如下错误: 复制代码 代码如下: ERROR 1148 (4

  • vue恢复初始数据this.$data,this.$options.data()解析

    vue恢复初始数据this.$data,this.$options.data()解析

    目录 vue恢复初始数据this.$data,this.$options.data() vue恢复初始数据 this.$options.data()和this.$data你知多少 场所描述 主角登场 vue恢复初始数据this.$data,this.$options.data() vue恢复初始数据 在vue开放中我们会遇到一个页面或者一个弹窗让他恢复到原始数据的情况,如果数据不多我们可以重设赋值一下,但数据较多的情况下会比较麻烦,这时候可以用到 this.$data,this.$options

  • vue将data恢复到初始状态 && 重新渲染组件实例

    1. 将data恢复到初始状态 Object.assign(this.$data, this.$options.data()) // 初始化data 这里的 this.$options.data() 作为源对象, this.$data 作为目标对象.源对象覆盖并合并目标对象中的内容,即有则覆盖,无则添加. 2. 重新渲染组件 方法一:v-if(可以重置生命周期) 虽然能实现重新渲染,但不推荐首选 方法二:给组件加key值[推荐] 通过修改key的值,就会重新渲染该组件 方法三:this.$for

  • 使用vue-router在Vue页面之间传递数据的方法

    前言 几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章.这是在应用程序中探索的一个基本例子. 通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面.(不通顺)例如,您遵循 master-detail 模式,其中您有一个数据列表,通过更深入地挖掘可以获得关于列表中特定项的更多信息. 我们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据. 如果你还没有读过我之前的教程或者不熟悉 vue-router 库,我建议你温习一下. 利用 U

随机推荐