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 ```diff
<script> <script>
let count = $state(0); let count = $state(0);
+ let double = $derived(count * 2); + let doubled = $derived(count * 2);
</script> </script>
<button on:click={() => count++}> <button on:click={() => count++}>
{double} {doubled}
</button> </button>
+<p>{count} doubled is {doubled}</p> +<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 ```diff
<script> <script>
let count = $state(0); let count = $state(0);
let double = $derived(count * 2); let doubled = $derived(count * 2);
+ $effect(() => { + $effect(() => {
+ // runs when the component is mounted, and again + // runs when the component is mounted, and again
+ // whenever `count` or `double` change, + // whenever `count` or `doubled` change,
+ // after the DOM has been updated + // after the DOM has been updated
+ console.log({ count, double }); + console.log({ count, doubled });
+ +
+ return () => { + return () => {
+ // if a callback is provided, it will run + // 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> </script>
<button on:click={() => count++}> <button on:click={() => count++}>
{double} {doubled}
</button> </button>
<p>{count} doubled is {doubled}</p> <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> </script>
<div bind:this={div}> <div bind:this={div}>
{#each message as message} {#each messages as message}
<p>{message}</p> <p>{message}</p>
{/each} {/each}
</div> </div>

Loading…
Cancel
Save