z-util-page/types/Reactive/index.d.ts

web utils

/**
 * @category 响应式数据API
 * @module Reactive
 */
export type ReactiveOptions = {
    value: any;
    isShadow: boolean;
    isReadonly: boolean;
};
/**
 * 代理对象值，返回响应式数据
 * @example
 * ```ts
 * const obj = reactive({name:'张三'});
 * obj.name = '李四';
 * console.log(obj.name); //李四
 * ```
 * @param value 对象值
 * @param isShadow true为浅代理，false为深代理
 * @param isReadonly 是否只读
 * @returns { Proxy<T> }
 */
export declare function reactive<T extends object>(value: T, isShadow?: boolean, isReadonly?: boolean): T;
export interface Ref<T> {
    value: T;
}
/**
 * 代理基本类型值，返回响应式数据
 * ```ts
 * const obj = ref(3);
 * obj.value = 4;
 * console.log(obj.value); //4
 * ```
 * @param value 基本类型值
 * @param isReadonly 是否只读
 * @returns { value: T }
 */
export declare function ref<T>(value: T, isReadonly?: boolean): Ref<T>;
/**
 * 将响应式对象的某键值转为ref
 * @example
 * ```ts
 * const obj = reactive({ a: 1 });
 * const a = toRef(obj, 'a');
 * a.value = 2;
 * console.log(obj.a); //2
 * ```
 * @param val 响应式对象
 * @param key 键值
 * @returns Ref
 */
export declare function toRef(val: any, key: string | symbol): {
    value: any;
};
/**
 * 将响应式对象的键值全部转换为Ref, 可解构使用
 * @example
 * ```ts
 * const obj = reactive({ a: 1, b: 2 });
 * const { a, b } = toRefs(obj);
 * a.value = 2;
 * console.log(obj.a); //2
 * ```
 * @param obj 响应式对象
 * @returns Refs
 */
export declare function toRefs(obj: any): {};
export type EffectOptions = {
    schedule?: Function;
    lazy?: boolean;
    immediate?: boolean;
    flush?: 'post' | '';
};
export type DepsMap = Map<string | symbol, Set<Effect>>;
export interface Effect {
    (): any;
    deps: Array<Set<Effect>>;
    childs: Array<Effect>;
    options: EffectOptions;
    shouldTrack: boolean;
}
/**
 * 创建副作用函数
 * @example
 * ```ts
 * const count = ref(0);
 * effect(() => {
 *  console.log(count.value);
 * })
 * count.value = 1;
 * // 打印1
 * ```
 * @param func 函数
 * @param options 配置
 * @returns effectFunc
 */
export declare function effect(func: Function, options?: EffectOptions): Effect;
/**
 * 获取计算属性
 * @example
 * ```ts
 * const count = ref(0);
 * const double = computed(() => count.value * 2);
 * console.log(double.value); //0
 * count.value = 1;
 * console.log(double.value); //2
 * ```
 * @param getter
 * @returns computed
 */
export declare function computed<T>(getter: () => {
    readonly value: T;
}): {
    readonly value: any;
};
export interface watchCallback {
    (oldVal: any, newVal: any, onInvalidate: Function): void;
}
/**
 * 监听响应式数据
 * @example
 * ```ts
 * const count = ref(0);
 * watch(count, (newVal, oldVal) => {
 *  console.log(newVal, oldVal);
 * })
 * count.value = 1;
 * // 打印1 0
 * ```
 * @param source 副作用函数或者响应式对象
 * @param cb 数据变化后回调函数
 * @param options 配置
 */
export declare function watch(source: Function | object, cb: watchCallback, options?: EffectOptions): void;
/**
 * 获取原始对象
 * @example
 * ```ts
 * const count = reactive({ a: 1 });
 * console.log(toRaw(count)); //{ a: 1 }
 * ```
 * @param proxy 响应式对象
 * @returns 原始对象
 */
export declare function toRaw<T>(proxy: T): T;