Object.assign(this.$data, this.$options.data())-vue清空数据

简介: Object.assign(target,...source)是es6新增的方法,可以合并对象,用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象,target:目标对象,source:源对象,通过Object.assign方法,把source合并给target,如果目标对象中的属性名与源对象中的属性名相同时,则属性将被源对象中的属性覆盖,然后返回target对象;

使用场景


vue中,如果我们需要对vue里面的data数据重置,一个一个数据重置非常麻烦,那么一个更为简单高效的写法如下:

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

解读:



Object.assign(target,...source)

是es6新增的方法,可以合并对象,用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象,target:目标对象,source:源对象,通过Object.assign方法,把source合并给target,如果目标对象中的属性名与源对象中的属性名相同时,则属性将被源对象中的属性覆盖,然后返回target对象;


this组件实例,通过this可以获取实例上的data属性;


this.$data,

是所有响应式数据,this.$data可以操作所有的响应式数据,data被放置在vm上,经过代理,实现响应式数据;

this.$options

,当前组件的配置对象,包括data,methods等,this.$options.data就是组件的初始值(vue里面的data);


通过Object.assign把vue的初始化数据对象data,合并到响应式数据this.$data上,即可实现vue对象下面的所有data响应式数据的重置


目录
相关文章
|
6天前
|
JavaScript 前端开发 开发者
响应式原理:Vue 如何跟踪数据变化
【4月更文挑战第22天】Vue 的响应式系统是其核心,通过数据双向绑定实现视图与数据同步。依赖收集和观测数据使Vue能跟踪变化,变化通知组件更新视图。高效的更新策略如批量更新和虚拟DOM提升性能。组件化和可组合性支持有效通信和代码复用,强调数据驱动开发。开发者应合理组织数据、谨慎处理变更并充分利用组件化优势,以提高效率和用户体验。
|
6天前
Vue3响应式数据ref
Vue3响应式数据ref
|
6天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
5天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
5天前
|
JavaScript 前端开发 开发者
Vue.js过滤器:让数据展示更灵活
Vue.js过滤器:让数据展示更灵活
|
6天前
|
JavaScript
Vue3之Props组件数据传递
Vue3之Props组件数据传递
8 0
|
6天前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
14 1
|
6天前
|
JavaScript
vue3使用element-plus 树组件(el-tree)数据回显
vue3使用element-plus 树组件(el-tree)数据回显
14 0
|
6天前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
19 2
|
6天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers