【Vue2.x 随笔】如何初始化/清空所有data响应式数据

后台管理项目中，在页面切换时（不同场景共用一个展示界面）不同数据需要共用一个input框等，就会出现因取消或者保存结束后，切换到其他场景时还会出现上一个页面输入（绑定）的数据（因为响应式数据data里没有清除） 解决办法：如果涉及到data中的响应式数据只有一个，可以一个一个手动赋值为空来初始化。但是如果项目中有100个响应式数据呢？所以手动一个个赋值为空显然是不现实的，所以   知识点

1.Object.assign(目标对象target, 源对象sources)， 对象合并方法，如果两个对象含有相同的键值，则源对象的值会覆盖目标对象的值。

　　联想知识点：浅拷贝  Object.assign( {},  obj )

2. this.$options.data()  这个是vue原始的数据，就是你页面刚加载时的data, 理论上应该都是空的

    this.$data   这个是现在阶段的vue数据，就是你操作的响应式data的数据

   this.$data  目标对象   this.$options.data()   源对象    ，相同的键值时，源对象的值（空）会覆盖目标对象的值（之前操作过响应式数值），达到了将所有vue响应式data的数据初始化/清空的效果

      // 需要清除数据,注意这种写法
      // Object.assign()  ES6中新增的方法可以合并对象
      // 组件实例的this.$data，可以操作data当中响应式数据
      // this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空的
      Object.assign(this.$data, this.$options.data())

 

 

标签：对象,数据,Object,响应,Vue2,清空,data,options
来源： https://www.cnblogs.com/wanglei1900/p/15971525.html