Fe-interview: [vue] vue中怎么重置data?

Created on 2 Jul 2019  ·  21Comments  ·  Source: haizlin/fe-interview

[vue] vue中怎么重置data?

vue

Most helpful comment

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

All 21 comments

只有问题没有答案吗

@Mary5haw 目前还没有人回答,你来回答下呗

使用Object.assign(),vm.$data可以获取当前状态下的data,vm.$options.data可以获取到组件初始化状态下的data,具体可以看vm.$options

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

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data。
bject.assign(this.$data, this.$options.data())

初始状态下设置data数据的默认值,重置时直接bject.assign(this.$data, this.$options.data())

说明:
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data(即初始默认值)
如果只想修改data的某个属性值,可以this[属性名] = this.$options.data()[属性名],如this.message = this.$options.data().message

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

浅拷贝会影响到初始化的data吗?

想问一句,这个使用场景在哪里?真的没碰见过需要重置的情况

想问一句,这个使用场景在哪里?真的没碰见过需要重置的情况

比如,有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。

@censek 重置的意思 是使数据恢复成操作之前吗 不是置空是吗?

1.使用Object.assign,可以重新绑定data的响应式。
2.使用$set
3.组件强制更新

我们可以通过this.$data获取当前状态下的data,通过this.$options.data()获取该组件初始状态下的data。
然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态

比如,有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。

为啥不写个方法 this.data.form = {}? 说实话没太懂重置data的意义 ,能请教一下吗

@censek 重置的意思 是使数据恢复成操作之前吗 不是置空是吗?

可以设置表单的默认值。

使用 Object.assign(this.$data,this.$options.data.call(this)) 这样写才有用

  1. 逐个赋值
  2. 使用 Object.assign(this.data, this.$options.data())
  3. 重置 data 中某个对象或属性:this.params = this.$options.data().params

Object.assign(this.$data, this.$options.data())
挺好的 可以重置回初始值 优雅写法

浅拷贝

比如,有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。

为啥不写个方法 this.data.form = {}? 说实话没太懂重置data的意义 ,能请教一下吗

这是我工作中用到的 this.formList = this.$options.data.call(this).formList

想问一句,这个使用场景在哪里?真的没碰见过需要重置的情况

懒加载

1. 逐个赋值

2. 使用 Object.assign(this.data, this.$options.data())

3. 重置 data 中某个对象或属性:this.params = this.$options.data().params

在加个this.$set()齐了

Was this page helpful?
0 / 5 - 0 ratings