mosaicstack/stack
25
0
Fork 1
Code Issues 343 Pull Requests 13 Actions Packages Projects Releases 15 Wiki Activity

format: apply repo prettier (3.8.1) to the folded skills tree

Browse Source 
963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.
This commit is contained in:
fargo
2026-08-19 14:37:17 -05:00
parent d2eeb64433
commit 1a822493ba
962 changed files with 29594 additions and 27188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/mosaic/framework/skills/vueuse-functions/references/refWithControl.md
+45 -46
View File
@@ -13,28 +13,28 @@ Fine-grained controls over ref and its reactivity.
`refWithControl` uses `extendRef` to provide two extra functions `get` and `set` to have better control over when it should track/trigger the reactivity.
```ts
import { refWithControl } from '@vueuse/core'
import { refWithControl } from '@vueuse/core';
const num = refWithControl(0)
const doubled = computed(() => num.value * 2)
const num = refWithControl(0);
const doubled = computed(() => num.value * 2);
// just like normal ref
num.value = 42
console.log(num.value) // 42
console.log(doubled.value) // 84
num.value = 42;
console.log(num.value); // 42
console.log(doubled.value); // 84
// set value without triggering the reactivity
num.set(30, false)
console.log(num.value) // 30
console.log(doubled.value) // 84 (doesn't update)
num.set(30, false);
console.log(num.value); // 30
console.log(doubled.value); // 84 (doesn't update)
// get value without tracking the reactivity
watchEffect(() => {
console.log(num.peek())
}) // 30
console.log(num.peek());
}); // 30
num.value = 50 // watch effect wouldn't be triggered since it collected nothing.
console.log(doubled.value) // 100 (updated again since it's a reactive set)
num.value = 50; // watch effect wouldn't be triggered since it collected nothing.
console.log(doubled.value); // 100 (updated again since it's a reactive set)
```
### `peek`, `lay`, `untrackedGet`, `silentSet`
@@ -42,31 +42,31 @@ console.log(doubled.value) // 100 (updated again since it's a reactive set)
We also provide some shorthands for doing the get/set without track/triggering the reactivity system. The following lines are equivalent.
```ts
import { refWithControl } from '@vueuse/core'
import { refWithControl } from '@vueuse/core';
// ---cut---
const foo = refWithControl('foo')
const foo = refWithControl('foo');
```
```ts
import { refWithControl } from '@vueuse/core'
import { refWithControl } from '@vueuse/core';
const foo = refWithControl('foo')
const foo = refWithControl('foo');
// ---cut---
// getting
foo.get(false)
foo.untrackedGet()
foo.peek() // an alias for `untrackedGet`
foo.get(false);
foo.untrackedGet();
foo.peek(); // an alias for `untrackedGet`
```
```ts
import { refWithControl } from '@vueuse/core'
import { refWithControl } from '@vueuse/core';
const foo = refWithControl('foo')
const foo = refWithControl('foo');
// ---cut---
// setting
foo.set('bar', false)
foo.silentSet('bar')
foo.lay('bar') // an alias for `silentSet`
foo.set('bar', false);
foo.silentSet('bar');
foo.lay('bar'); // an alias for `silentSet`
```
## Configurations
@@ -76,21 +76,20 @@ foo.lay('bar') // an alias for `silentSet`
`onBeforeChange` option is offered to give control over if a new value should be accepted. For example:
```ts
import { refWithControl } from '@vueuse/core'
import { refWithControl } from '@vueuse/core';
// ---cut---
const num = refWithControl(0, {
onBeforeChange(value, oldValue) {
// disallow changes larger then ±5 in one operation
if (Math.abs(value - oldValue) > 5)
return false // returning `false` to dismiss the change
if (Math.abs(value - oldValue) > 5) return false; // returning `false` to dismiss the change
},
})
});
num.value += 1
console.log(num.value) // 1
num.value += 1;
console.log(num.value); // 1
num.value += 6
console.log(num.value) // 1 (change been dismissed)
num.value += 6;
console.log(num.value); // 1 (change been dismissed)
```
### `onChanged()`
@@ -98,13 +97,13 @@ console.log(num.value) // 1 (change been dismissed)
`onChanged` option offers a similar functionally as Vue's `watch` but being synchronized with less overhead compared to `watch`.
```ts
import { refWithControl } from '@vueuse/core'
import { refWithControl } from '@vueuse/core';
// ---cut---
const num = refWithControl(0, {
onChanged(value, oldValue) {
console.log(value)
console.log(value);
},
})
});
```
## Type Declarations
@@ -116,13 +115,13 @@ export interface ControlledRefOptions<T> {
*
* Returning `false` to dismiss the change.
*/
onBeforeChange?: (value: T, oldValue: T) => void | boolean
onBeforeChange?: (value: T, oldValue: T) => void | boolean;
/**
* Callback function after the ref changed
*
* This happens synchronously, with less overhead compare to `watch`
*/
onChanged?: (value: T, oldValue: T) => void
onChanged?: (value: T, oldValue: T) => void;
}
/**
* Fine-grained controls over ref and its reactivity.
@@ -133,14 +132,14 @@ export declare function refWithControl<T>(
initial: T,
options?: ControlledRefOptions<T>,
): ShallowUnwrapRef<{
get: (tracking?: boolean) => T
set: (value: T, triggering?: boolean) => void
untrackedGet: () => T
silentSet: (v: T) => void
peek: () => T
lay: (v: T) => void
get: (tracking?: boolean) => T;
set: (value: T, triggering?: boolean) => void;
untrackedGet: () => T;
silentSet: (v: T) => void;
peek: () => T;
lay: (v: T) => void;
}> &
Ref<T, T>
Ref<T, T>;
/** @deprecated use `refWithControl` instead */
export declare const controlledRef: typeof refWithControl
export declare const controlledRef: typeof refWithControl;
```