标签：对象 数据 Object 响应 Vue2 清空 data options

后台管理项目中，在页面切换时（不同场景共用一个展示界面）不同数据需要共用一个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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。