vue 重置data中的数据 this.$options.data()

使用场景： 

在做项目时我们经常会遇到用一个弹窗表单来实现新增和编辑两个功能，这样就会出现，先点击编辑，回显出来的数据，再下一次点击新增时也会存在，所以我们需要在打开弹窗时清除数据。

解决方法： 

旧方法：

用JSON.parse(JSON.stringify())深拷贝 ，代码如下：

<script>

// import ....

// 在这里初始化formData
const formData = {
  mobile: '',
  companyCode: '',
  password: '',
  confirmPassword: '',
  userName: '',
  placeCode: '',
  placeAreaCode: '',
  roleCodeList: []
}

export default {
  
  data() {
    return {
      // ...
      // 将初始数据深拷贝给data中的formData
      formData: JSON.parse(JSON.stringify(formData))
    }
  }
  methods: {
    // ...

    // 编辑/新增
    async edit(val) {
      this.drawerTitle = val ? '编辑' : '新增'
      if (val) {
        const { data } = await getMerchantUserDetail()
        this.formData = data
      } else this.formData = JSON.parse(JSON.stringify(formData)) // 将初始数据深拷贝给this.formData
      // 打开弹窗
      this.trackInfoVisible = true
      // 清除校验
      this.$nextTick(() => {
        this.$refs.formData.clearValidate()
      })
    },
  }

 新方法：

使用this.$options.data()

<script>

// import ....

export default {
  
  data() {
    return {
      // ...
      // 初始化formData
      formData: {
        mobile: '',
        companyCode: '',
        password: '',
        confirmPassword: '',
        userName: '',
        placeCode: '',
        placeAreaCode: '',
        roleCodeList: []
      }
    }
  }
  methods: {
    // ...

    // 编辑/新增
    async edit(val) {
      this.drawerTitle = val ? '编辑' : '新增'
      if (val) {
        const { data } = await getMerchantUserDetail()
        this.formData = data
      } else this.formData = this.$options.data.call(this).formData // 只重置data中的formData
      // 打开弹窗
      this.trackInfoVisible = true
      // 清除校验
      this.$nextTick(() => {
        this.$refs.formData.clearValidate()
      })
    },
  }

 this.$options.data()的使用方法：

// 1、重置data中的所有数据
// 无论data中的数据如何改变，使用这句就可以恢复初始数据
Object.assign(this.$data, this.$options.data())

// 2、重置data中的某个值
// 只会让指定的这个数据被初始化，不会影响到data里的其他数据
// 用this.$options.data()重置组件data时，data()里用this获取的props或method都为undefined
this.formData = this.$options.data.call(this).formData