在 Vue 3 中，reactive 是一个非常有用的响应式工具，它能够将对象变成响应式的数据模型。当对象的属性值发生变化时，Vue 会自动触发视图的更新，保证用户界面与数据状态的同步。今天，我们将介绍如何利用 Vue 3 的 reactive 配合深拷贝以及自定义方法来实现数据的重置功能。
reactive 的基本用法
Vue 3 中的 reactive 函数是用来创建响应式对象的。它接收一个普通的对象作为参数，并返回一个新的对象，这个新的对象是响应式的。换句话说，当你更改该对象的任何属性时，Vue 会自动检测到这些变化并更新相关视图。
ts
复制编辑
import { reactive } from 'vue'
const state = reactive({
name: 'Vue 3',
version: '3.2'
})
state.name = 'Vue 4' // 视图会自动更新
通过 reactive，Vue 会自动追踪该对象的变化，并确保数据和视图的一致性。
自定义 useReactive Hook
在实际开发中，我们常常需要对某些数据进行深拷贝，以便于在特定操作时恢复原始数据。比如，当用户对某个表单进行编辑时，我们可能希望在用户放弃编辑时能够重置数据，恢复到原始状态。
这里我们创建了一个 useReactive 的自定义 Hook，它接收一个对象，并使用 reactive 将其变成响应式对象。同时，我们使用 JSON.parse(JSON.stringify(value)) 来进行深拷贝，这样可以避免直接引用原始数据，确保数据重置时不会影响到其他地方的状态。
ts
复制编辑
import { reactive } from 'vue'
export const useReactive = <T extends Object>(value: T) => {
// 使用深拷贝确保 state 是原始数据的副本
const state = reactive(JSON.parse(JSON.stringify(value))) as T
// 重置 state 数据为原始数据
const reset = () => {
// 删除现有的属性
Object.keys(state).forEach((key) => delete state[key as keyof typeof state])
// 重新赋值为原始数据
Object.assign(state, JSON.parse(JSON.stringify(value)))
}
return {
state,
reset
}
}
代码解析
- 深拷贝: 使用
JSON.parse(JSON.stringify(value))来实现数据的深拷贝。这样可以避免对原始数据的直接引用，确保state是原始数据的独立副本。如果不使用深拷贝，修改state会影响到外部的value数据。 - 重置功能:
reset方法通过删除state中的所有键，然后将其重新赋值为原始数据。这保证了state在任何时候都能够恢复到初始状态。 - 类型支持: 我们使用了泛型
T来确保useReactive可以处理任何类型的对象。
使用场景
这种自定义 Hook 可以广泛应用于多种场景，尤其是在需要重置数据状态的地方，例如表单重置、编辑状态恢复等。
ts
复制编辑
const { state, reset } = useReactive({ name: 'John', age: 30 })
state.name = 'Doe'
console.log(state.name) // 输出: Doe
// 调用重置方法
reset()
console.log(state.name) // 输出: John
在这个例子中，useReactive 被用于管理用户的数据，允许用户在修改后随时重置数据，恢复到原始状态。
总结
通过结合 Vue 3 的 reactive 和深拷贝，我们能够实现一个简单的响应式数据管理方案。useReactive 提供了一个清晰、简洁的方式来重置对象数据，这对于需要撤销修改或恢复初始状态的场景非常有用。你可以根据自己的需求进一步扩展这个 Hook，使其在实际项目中更具适应性和可复用性。
