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恢复初始化数据的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持前端开发者

» 本文来自:前端开发者 » 《Vue data恢复初始化数据的实现方法_泠吢_前端开发者》
» 本文链接地址:https://www.rokub.com/71066.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!