on
编辑此页面import { on } from "solid-js"
function on<T extends Array<() => any> | (() => any), U>( deps: T, fn: (input: T, prevInput: T, prevValue?: U) => U, options: { defer?: boolean } = {}): (prevValue?: U) => U | undefined
on
被设计用于传入计算中以使其依赖关系明确。
如果传入依赖数组,则 input
和 prevInput
也是数组。
createEffect(on(a, (v) => console.log(v, b())));
// 等同于:createEffect(() => { const v = a(); untrack(() => console.log(v, b()));});
你也可以通过将 defer 选项设置为 true 来选择不立即运行计算,而是只在发生变化时运行。
// 不会立即运行createEffect(on(a, (v) => console.log(v), { defer: true }));
setA("new"); // 现在它会运行
将 on
与存储一起使用
Info:
请注意,对于存储和可变对象,在父对象上添加或删除属性将触发效果。参见 createMutable
const [state, setState] = createStore({ a: 1, b: 2 });
// 这样是行不通的createEffect(on(state.a, (v) => console.log(v)));
setState({ a: 3 }); // 不会打印任何内容
// 应该使用箭头函数createEffect( on( () => state.a, (v) => console.log(v) ));
setState({ a: 4 }); // 打印 4
参数和选项
参数 | 类型 | 描述 |
---|---|---|
deps | T | 要监视的依赖项。 |
fn | (input: T, prevInput: T, prevValue?: U) => U | 当依赖项改变时要运行的函数。 |
options | { defer?: boolean } | 配置效果的选项。 |