vue3组件数据重置

一般做法：

import { ref } from 'vue';

const data = ref({
    a: 1,
    b: 2,
    c: 3
});

function reset() {
    data.value = {
        a: 1,
        b: 2,
        c: 3
    }
}

改造：写一个hooks实现重置数据

方式1：我们定义一个数据为：传入一个回调函数

const { data, reset } = useResetDataFn(() => { a: 1, b: 2, c: 3 });

调用useResetDataFn，传入一个函数，解构出来data,以及reset重置方法。

import { ref } from 'vue';

export function 调用useResetDataFn<T>(cb: () => T) {
    const data = ref(cb());
    const reset = () => {
        data.value = cb()
    };
    return { data, reset };
}

方式2：直接传入定义数据，不用回调函数

const { data, reset } = useResetData({ a: 1, b: 2, c: 3 });

import { ref } from 'vue';
export function useResetData<T>(value: T) {
    const initValue = cloneDeep(value);
    const data = ref(value);
    const reset = () => {
        data.value = cloneDeep(initValue)
    };
    return { data, reset };
}