zoukankan      html  css  js  c++  java
  • 【Vue】Vue中data重置问题

    解决方法:

    Object.assign(this.$data, this.$options.data())

    this.$data:当前状态下的data,this.$options.data():该组件初始状态下的data。

    Object.assign()

    Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

    目标对象有1个,后边可以有多个源对象。注意他只会拷贝源对象自身且是可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。

    复制对象

    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }

    注意,Object.assign()是浅拷贝。

    合并对象

    var o1 = { a: 1 };
    var o2 = { b: 2 };
    var o3 = { c: 3 };
    var obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

    注意,具有相同属性的对象,同名属性,后边的会覆盖前边的。

    Vue中的使用技巧

    由于Object.assign()有上述特性,所以我们在Vue中可以这样使用:
    Vue组件可能会有这样的需求:在某种情况下,需要重置Vue组件的data数据。此时,我们可以通过this.$data获取当前状态下的data,通过this.$options.data()获取该组件初始状态下的data。
    然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态。

    转自:https://www.cnblogs.com/Kyaya/p/10034005.html

  • 相关阅读:
    浏览器20年图说简史
    CF1437D Solution
    CF1446B Solution
    CF1444A Solution
    CF1437C Solution
    让您的网站拥有MSDN资源库搜索功能[转摘MSDN]
    自定义web part版面变形的原因
    SPS中模板保存数据库的位置
    利用配置文件自定义站点
    VS.NET2003 开发环境 生成样式表 和 自动书写HTML对象模型
  • 原文地址:https://www.cnblogs.com/vickylinj/p/14384460.html
Copyright © 2011-2022 走看看