Vue2和Vue3时，利用Object.assign()方法对对象数据进行初始化或置空功能的实现。

最新推荐文章于 2025-06-25 16:20:31 发布

原创最新推荐文章于 2025-06-25 16:20:31 发布 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

工作分享同时被 2 个专栏收录

75 篇文章

订阅专栏

vue学习笔记

30 篇文章

订阅专栏

博客围绕表单重置业务场景展开，涉及点击新增按钮重新打开弹框时重置内容，以及实现重置按钮功能时对某些数据置空。分别介绍了Vue2和Vue3的实现方法，Vue2可通过内置方法，如this.$data和this.$options.data()来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景：

点击新增按钮进行form表单的输入填写，当再重新打开弹框时，需要把弹框的内容重置。
或者在实现重置按钮功能的时候，需要对某些数据进行置空的操作。

vue2写法

通过vue2的内置方法来进行实现。

//this.$data 获取当前状态下的data

//this.$options.data() 获取该组件初始状态下的data

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

vue3写法

//定义一个函数把需要的值return出来
const dataDefault = () => {
  return {
    formData: {
      data: ''
    },
    searchData: {
      data: ''
    }
  }
}

//把返回值进行reactive，然后得到数据
const state = reactive(dataDefault())

//重置按钮
const resetClick = () => {
  //  state.formData 当前值    dataDefault().formData 页面初始进入时设置的值
  //  该步操作把初始值重新赋值给当前值，达到重置对象值的目的。
  Object.assign(state.formData, dataDefault().formData);
}