vue3中重置数据为初始值

泥鸽鸽

于 2022-12-30 00:21:01 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言 vue3

本文探讨了Vue3环境下，如何避免使用$options.data()的限制，提供了一种合理的数据重置方法，通过`toRaw`操作结合深拷贝，确保form组件的状态能有效清零并分享了相关代码实例。

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

相比于vue2的this.$options.data() vue3 好像没有提供相应的方法重置数据如果有的话请各位大佬再文章下方留言告诉我让我也涨涨姿势

我参考了网上其他人的做法大多不靠谱于是根据一版比较合理的答案改进了一下如下

原始数据

let form = ref({
  name: "",
  address: "",
  desc: "",
  logo: "",
})

重置方法

// 重置数据相关
let _form = toRaw({
  ...form.value
})
let resetForm = () => {
  form.value = { ..._form.value }
  console.log(form, "form.value")
}

调用重置函数

resetForm()