【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
洗尽铅华始见金,褪去浮华归本真