Reactive statements triggered too often

Given the following component:

<script>
    import Nested from './Nested.svelte';
    let value = {'a':43};
    $: console.log('value', value);
</script> 
<Nested bind:answer={value}/>

and Nested.svelte:

<script>
    export let answer;
    $: console.log('answer', answer);
</script>

<p>The answer is {answer}</p>

I'm getting the following console output:

value Object { a: 43 }
answer Object { a: 43 }
value Object { a: 43 }
value Object { a: 43 }
answer Object { a: 43 }

I would have expected only the first two lines, as the value is never re-assigned. If I set value to a string or number (e.g. let value = 43;) the behaviour is as expected and I get:

value 43
answer 43

Why are the reactive satements executed multiple times if the value is an object? Why is it ivoked more often in the outer component?

0 ответов

Другие вопросы по тегам