本文主要是介绍vue2和vue3中好用的数据重置方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
我们在做一些数据查询的时候，往往会有重置按钮，这个时候，如何把数据快速重置回初始数据就是一个问题了。
基础重置
对于前端初学者来说，大部分人会选择把data里的数据重新赋值一遍，如：
<script>
export default {data() {return {listQuery: {name: undefined,sex: 1,mobile: null,age: undefined,type: "",},};},methods: {handleReset() {this.listQuery = {name: undefined,sex: 1,mobile: null,age: undefined,type: "",};},},
};
</script>这么做并不是什么好的选择，因为如果查询字段过多，就会显得代码很冗余。
Vue2中数据重置最佳实践
vue2中我们可以使用一种依赖于选项 API 内部的解决方法$options
<script>
export default {data() {return {listQuery: {name: undefined,sex: 1,mobile: null,age: undefined,type: "",},};},methods: {handleReset() {Object.assign(this.listQuery, this.$options.data().listQuery);},},
};
</script>短短的一行代码就实现了数据重置，更不用关注listQuery里有多少字段，优雅而便捷。
Vue3中数据重置最佳实践
vue3我们更倾向于使用组合式API,而不是在vue3里继续使用vue2的选项式API语法；所以vue2中$options就没法直接使用了。我们在这里推荐一种可重用函数的写法，也十分实用。
<script setup>
import { reactive } from "vue";
//定义可重用函数和初始数据
const originData = () => ({ name: "", age: "" });
//赋值
const listQuery = reactive(originData());
listQuery.name = "皮卡丘";
listQuery.age = 10;
//数据重置
const handleReset = () => {Object.assign(listQuery, originData());
};
</script>
可重用函数既可以用来定义初始数据，也可以用来重置数据，是不是也显得很优雅。
大家赶快在项目里运用起来吧～
这篇关于vue2和vue3中好用的数据重置方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
