Componente no Svelte 4:
<script>
let x = 1
let y = "less than 10"
function check(){
if(x > 10){
y = "more than 10"
}
}
$: {
check()
}
</script>
<div>
not runes
<button onclick={() => x++ }>{x}</button>
{y}
</div>
Observe como a instrução reativa chama uma função de verificação, portanto, a instrução reativa nunca é acionada porque "x" não é chamado diretamente.
Mas no modo runas o $effect
é acionado mesmo que "x" não apareça diretamente no corpo do efeito:
<script>
let x = $state(1);
let y = $state("less than 10");
function check(){
if(x > 10){
y = "more than 10"
}
}
$effect(() => {
check()
})
</script>
<div>
runes
<button onclick={() => x++ }>{x}</button>
{y}
</div>
Acho que essa é uma mudança em como os efeitos do svelte funcionam de 4 para 5, mas eu estava pensando como o svelte sabe quando executar o efeito, quando no modo runas? Ele olha para o código da função e verifica as variáveis reativas? E se eu tiver uma chamada de função profundamente aninhada, com uma variável reativa na função mais profunda, o efeito ainda a detectará?
Isso funciona por meio de sinais que se comunicam por meio de um contexto compartilhado em tempo de execução.
Você pode pensar nisso como um efeito configurando uma lista global e cada sinal (algum tipo de estado) adicionando a si mesmo a essa lista de dependências quando acessado. No final da execução do efeito, a lista conterá todas as coisas cujas mudanças devem disparar o efeito novamente.
Sim, desde que nenhum código assíncrono interrompa a execução.
(O Svelte 3/4 usa análise de código em tempo de compilação, que não pode fazer isso.)