vue2和vue3中好用的数据重置方法

零凌林

已于 2024-10-21 09:31:42 修改

阅读量3k

点赞数 14

分类专栏： vue2的世界 vue3的世界文章标签： 1024程序员节 vue.js javascript vue最佳实践数据重置 vue2.0 vue3.0

于 2023-10-24 16:22:16 首次发布

本文链接：https://blog.youkuaiyun.com/yxlyttyxlytt/article/details/134014543

版权

vue3的世界同时被 2 个专栏收录

17 篇文章

订阅专栏

vue2的世界

14 篇文章

订阅专栏

前言

我们在做一些数据查询的时候，往往会有重置按钮，这个时候，如何把数据快速重置回初始数据就是一个问题了。

基础重置

对于前端初学者来说，大部分人会选择把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的区别？

Vue 2 和 Vue 3 是 Vue.js 框架的两个主要版本，它们在许多方面都有所不同。以下是一些主要的区别：

1. 性能优化

Vue 2: Vue 2 使用虚拟 DOM，但它的虚拟 DOM 实现相对较重，并且在某些情况下可能会导致性能问题。
Vue 3: Vue 3 引入了 Proxy 作为其响应式系统的基础，这比 Vue 2 的 Object.defineProperty 更加高效和灵活。此外，Vue 3 还引入了编译时的优化，如静态树提升和静态属性提升，这些优化可以显著提高应用的性能。

2. Composition API

Vue 2: Vue 2 主要依赖于 Options API，通过选项（如 data、methods、computed 等）来组织代码。
Vue 3: Vue 3 引入了 Composition API，它提供了一种更灵活的方式来组织和重用逻辑。Composition API 允许开发者将相关的逻辑组织在一起，而不是被限制在组件选项中。

3. Fragments

Vue 2: Vue 2 组件只能有一个根元素。
Vue 3: Vue 3 支持组件有多个根元素（Fragments），这使得开发者可以更灵活地组织组件结构。

4. Teleport

Vue 3: Vue 3 引入了 Teleport 组件，它允许开发者将组件渲染到 DOM 树的其他位置，而不是当前组件的父级。这在处理模态框、通知等场景时非常有用。

5. Suspense

Vue 3: Vue 3 引入了 Suspense 组件，它允许开发者处理异步组件的加载状态。Suspense 可以与 Composition API 一起使用，以更优雅地处理异步操作。

6. 自定义渲染器

Vue 3: Vue 3 提供了更灵活的自定义渲染器 API，这使得开发者可以创建自己的渲染器，如用于原生 Web Components 的渲染器。

7. TypeScript 支持

Vue 3: Vue 3 是用 TypeScript 编写的，并且对 TypeScript 提供了更好的支持。这使得 Vue 3 更适合大型项目和团队协作。

8. 其他变化

全局 API 的变化: Vue 3 对全局 API 进行了重构，许多全局 API 现在是应用实例的方法。
生命周期钩子的变化: Vue 3 对生命周期钩子的命名和调用顺序进行了调整。
模板语法的变化: Vue 3 对模板语法进行了一些微调，以更好地支持 Composition API。

总的来说，Vue 3 在性能、灵活性、类型支持和开发体验方面都有显著的改进。然而，这些改进也意味着从 Vue 2 迁移到 Vue 3 可能需要一些时间和努力。

vue2为什么监听不到数组内部的变化或者深层对象的变化？

在 Vue 2 中，由于其响应式系统的限制，监听数组内部的变化或深层对象的变化可能会遇到一些问题。以下是主要原因：

1. 数组变化检测

Vue 2 使用了 Object.defineProperty 来实现响应式系统。对于数组，Vue 2 通过拦截数组的变异方法（如 push、pop、shift、unshift、splice、sort、reverse）来触发视图更新。然而，这种机制不能检测到数组内部元素的变化，比如通过索引直接修改数组元素或修改数组对象的属性。

2. 深层对象变化检测

Vue 2 的响应式系统只能检测到对象属性的添加或删除，以及属性的值的变化。对于深层对象，Vue 2 默认不会递归地处理对象属性的响应式。这意味着，如果你在组件的 data 选项中定义了一个深层对象，然后直接修改这个对象的内部属性，Vue 2 可能不会检测到这些变化，因此也不会触发视图更新。

解决方法

为了解决这些问题，Vue 2 提供了一些方法来手动触发视图更新：

对于数组，可以使用 Vue.set 或 this.$set 方法来添加或修改数组元素。例如：

this.$set(this.array, index, newValue);

对于对象，可以使用 Vue.set 或 this.$set 方法来添加或修改对象的属性。例如：

this.$set(this.obj, 'newProp', newValue);

此外，Vue 2 还提供了 watch 选项，允许开发者手动监听数据的变化并执行相应的操作。

Vue 3 的改进

在 Vue 3 中，这些问题得到了解决。Vue 3 使用了 Proxy 作为其响应式系统的核心，这可以更灵活和高效地处理数组内部元素和深层对象属性的变化。因此，在 Vue 3 中，你通常不需要使用 Vue.set 或 this.$set 来手动触发视图更新，因为 Proxy 可以自动检测到这些变化。