pull/9607/head
Yuichiro Yamashita 2 years ago committed by GitHub
parent c7121aa38c
commit 7825570b07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -51,11 +51,11 @@ Derived state is declared with the `$derived` rune:
```diff
<script>
let count = $state(0);
+ let double = $derived(count * 2);
+ let doubled = $derived(count * 2);
</script>
<button on:click={() => count++}>
{double}
{doubled}
</button>
+<p>{count} doubled is {doubled}</p>
@ -92,13 +92,13 @@ To run code whenever specific values change, or when a component is mounted to t
```diff
<script>
let count = $state(0);
let double = $derived(count * 2);
let doubled = $derived(count * 2);
+ $effect(() => {
+ // runs when the component is mounted, and again
+ // whenever `count` or `double` change,
+ // whenever `count` or `doubled` change,
+ // after the DOM has been updated
+ console.log({ count, double });
+ console.log({ count, doubled });
+
+ return () => {
+ // if a callback is provided, it will run
@ -110,7 +110,7 @@ To run code whenever specific values change, or when a component is mounted to t
</script>
<button on:click={() => count++}>
{double}
{doubled}
</button>
<p>{count} doubled is {doubled}</p>
@ -158,7 +158,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
</script>
<div bind:this={div}>
{#each message as message}
{#each messages as message}
<p>{message}</p>
{/each}
</div>

Loading…
Cancel
Save