Vue3技巧大总结

reactive数据重置

在实际开发中，我们常常需要对某些数据进行深拷贝，以便于在特定操作时恢复原始数据。比如，当用户对某个表单进行编辑时，我们可能希望在用户放弃编辑时能够重置数据，恢复到原始状态。

这里我们创建了一个 useReactive 的自定义 Hook，它接收一个对象，并使用 reactive 将其变成响应式对象。同时，我们使用 JSON.parse(JSON.stringify(value)) 来进行深拷贝，这样可以避免直接引用原始数据，确保数据重置时不会影响到其他地方的状态。

ts
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 = (newData = null) => {
    // 删除现有的属性
    Object.keys(state).forEach((key) => delete state[key])
    if(newData){
        // 重新赋值为原始数据
        Object.assign(state,JSON.parse(JSON.stringify(newData)))
    }else{
        // 重新赋值为原始数据
        Object.assign(state, JSON.parse(JSON.stringify(value)))
    }
    
  }

  return {
    state,
    reset
  }
}