VUE2 和 VUE3 中数据重置的方法

最新推荐文章于 2026-04-24 04:05:21 发布

原创最新推荐文章于 2026-04-24 04:05:21 发布 · 1.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

vue2.0 同时被 2 个专栏收录

5 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了在Vue应用中，如何在VUE2和VUE3中处理数据重置，从基础的参数重新赋值到进阶的选项API和组合式API的使用，以及可重用函数在VUE3中的实践。

概述

我们在做一些数据查询、多条件搜索的时候，往往会有重置按钮，这个时候往往会用到数据重置。

基础示例

这个是基础的示例，就是在点击重置的时候吧参数重新赋值。但是当字段过多时，这么使用在代码体现上就不是很友好了。

<script>
export default {
  data() {
    return {
      formData: {
        name: undefined,
        sex: 1,
        mobile: null,
        age: undefined,
        type: "",
      },
    };
  },
  methods: {
    handleReset() {
      this.formData= {
        name: undefined,
        sex: 1,
        mobile: null,
        age: undefined,
        type: "",
      };
    },
  },
};
</script>

VUE2中进阶的用法

vue2中我们可以使用一种依赖于选项 API 内部的解决方法$options

<script>
export default {
  data() {
    return {
      formData: {
        name: undefined,
        sex: 1,
        mobile: null,
        age: undefined,
        type: "",
      },
    };
  },
  methods: {
    handleReset() {
      Object.assign(this.listQuery, this.$options.data().formData);
    },
  },
};
</script>

VUE3中进阶的用法

vue3我们更倾向于使用组合式API，而不是使用vue2的API。在这里推荐一种可重用函数的写法，也十分实用。

可重用函数既可以用来定义初始数据，也可以用来重置数据。

<script setup>
import { reactive } from "vue";
//定义可重用函数和初始数据
const originData = () => ({ name: "", age: "" });
//赋值
const formData= reactive(originData());
formData.name = "测试";
formData.age = 18;
//数据重置
const handleReset = () => {
  Object.assign(formData, originData());
};
</script>