【Vue2.x 随笔】如何初始化/清空所有data响应式数据 + 单独清空data响应式中的指定部分

后台管理项目中，在页面切换时（不同场景共用一个展示界面）不同数据需要共用一个input框等，就会出现因取消或者保存结束后，切换到其他场景时还会出现上一个页面输入（绑定）的数据（因为响应式数据data里没有清除）

解决办法：如果涉及到data中的响应式数据只有一个，可以一个一个手动赋值为空来初始化。但是如果项目中有100个响应式数据呢？所以手动一个个赋值为空显然是不现实的。

 底部有2022.3.6更新

 

 

 

需要掌握的知识点

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

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

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

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

 

 

 

实现初始化/清空所有data响应式数据的方法

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

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

 

 

 

2022.3.6更新

注意点！：Object.assign(this.$data, this.$options.data())  这个方法并不完美，响应式data数据里的this指向会被修改为全局window（虽然目前没遇到过data里调用this，以后业务需要会碰到）

　　　　最好的写法：Object.assign(this.$data, this.$options.data.call(this))    使用显示绑定，强制将this 绑定为当前组件实例对象（复习 显示绑定 call apply bind ）

另外需要单独清空data里的form表单数据:  this.form = this.$options.data.call(this).form