Vue组件如何不重新渲染即可将数据重置为挂载时的初始值

不需要手动逐个重置属性，也不需要强制组件重新渲染，可通过预存初始状态快照的方式实现，具体实现方案如下：

方案1：选项式API（Vue2/Vue3兼容） #

实现思路 #

提前定义初始数据的生成函数，每次调用都会返回全新的初始状态对象，重置时直接用新的初始对象覆盖当前响应式数据即可。

代码示例 #

// 单独定义初始状态生成函数，避免引用类型共享问题
const getDefaultAccount = () => ({
  name: "",
  customer: {
    orders: []
  }
})

export default {
  data() {
    return {
      account: getDefaultAccount()
    }
  },
  methods: {
    // 表单关闭时调用该方法即可完成重置
    resetForm() {
      this.account = getDefaultAccount()
    }
  }
}

如果不想抽离初始函数，也可以在组件挂载时存储初始状态快照：

export default {
  data() {
    return {
      account: {
        name: "",
        customer: {
          orders: []
        }
      },
      initialAccount: null
    }
  },
  mounted() {
    // 深拷贝存储初始状态，嵌套对象也不会丢失
    this.initialAccount = JSON.parse(JSON.stringify(this.account))
  },
  methods: {
    resetForm() {
      this.account = JSON.parse(JSON.stringify(this.initialAccount))
    }
  }
}

方案2：组合式API（Vue3） #

代码示例 #

import { reactive } from 'vue'

// 初始状态生成函数
const getDefaultAccount = () => ({
  name: "",
  customer: {
    orders: []
  }
})

const account = reactive(getDefaultAccount())

// 重置方法
const resetForm = () => {
  Object.assign(account, getDefaultAccount())
}

注意事项 #

• 如果数据对象包含函数、正则、Symbol等JSON无法序列化的特殊类型，可使用lodash.cloneDeep代替JSON序列化实现深拷贝，避免属性丢失。
• 上述方案均为直接修改响应式数据，Vue会自动触发视图更新，无需强制重渲染组件，性能远高于v-if销毁重建组件的实现方式。

内容的提问来源于stack exchange，提问作者Greg