AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 79554973
Accepted
tobiasBora
tobiasBora
Asked: 2025-04-04 17:41:14 +0800 CST2025-04-04 17:41:14 +0800 CST 2025-04-04 17:41:14 +0800 CST

Por que o Svelte não grava os sinais individualmente?

  • 772

Estou pensando sobre os internos do Svelte para projetar adequadamente meu aplicativo para ter eficiência máxima (posso lidar com (dezenas?) de milhares de elementos para atualizar, então eficiência importa), notavelmente com como a reatividade é implementada. Então, usando este pequeno exemplo (no link você pode inspecionar o código JS na aba direita), implementei este código básico:

<script>
    let foo = $state(42);
    let bar = $state(52);
</script>

<div onclick={() => foo = foo + 2}>
    Hello {foo}
</div>
<span onclick={() => bar = bar + 1}>
    Hello {bar}
</span>

e obtenho o seguinte JavaScript compilado:

import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';

var on_click = (_, foo) => $.set(foo, $.get(foo) + 2);
var on_click_1 = (__1, bar) => $.set(bar, $.get(bar) + 1);
var root = $.template(`<div> </div> <span> </span>`, 1);

export default function App($$anchor) {
    let foo = $.state(42);
    let bar = $.state(52);
    var fragment = root();
    var div = $.first_child(fragment);

    div.__click = [on_click, foo];

    var text = $.child(div);

    $.reset(div);

    var span = $.sibling(div, 2);

    span.__click = [on_click_1, bar];

    var text_1 = $.child(span);

    $.reset(span);

    $.template_effect(() => {
        $.set_text(text, `Hello ${$.get(foo) ?? ''}`);
        $.set_text(text_1, `Hello ${$.get(bar) ?? ''}`);
    });

    $.append($$anchor, fragment);
}

$.delegate(['click']);

O que parece importante é o código:

    $.template_effect(() => {
        $.set_text(text, `Hello ${$.get(foo) ?? ''}`);
        $.set_text(text_1, `Hello ${$.get(bar) ?? ''}`);
    });

Se meu entendimento de sinais estiver correto (eu segui esta ótima postagem para entender como os sinais são implementados), isso executará a função de retorno de chamada toda vez que um sinal mudar internamente... mas o problema é que se barmudar, o código $.set_text(text, `Hello ${$.get(foo) ?? ''}`);também mudará, ou seja, mudar um sinal aciona operações O(n) onde n é o número de sinais... Com 2 elementos isso não é muito, mas se eu tiver dezenas de milhares de elementos, temo ter um tempo de atualização não desprezível.

Então eu tenho duas perguntas:

  1. Por que o Svelte não implementa um retorno de chamada por sinal para ter uma complexidade O(1) independente do número de sinais?
  2. Além disso, a mesma ideia é seguida por observable? Meu objetivo final é entender a complexidade das atualizações no liveQueryobservable do Dexie.js.
svelte
  • 1 1 respostas
  • 13 Views

1 respostas

  • Voted
  1. Best Answer
    brunnerh
    2025-04-04T17:58:16+08:002025-04-04T17:58:16+08:00

    Adicionar muitos efeitos individuais traz consigo sua própria sobrecarga significativa, então as atualizações são em lote. O Svelte também não em lote tudo no componente, por exemplo, se você adicionar um #each, então cada item obtém seu próprio efeito de modelo.

    O código fornecido também não causará nenhuma atualização redundante do DOM. O set_textcódigo verificará se o valor realmente mudou e só interagirá com o conteúdo se realmente for necessário.

    Não posso comentar Dexie.jsnada relacionado a observáveis. Por favor, faça perguntas separadas.

    • 1

relate perguntas

  • Svetekit: Como posso alterar o caminho da ação do formulário?

  • Aplicar transições diferentes em telas menores

  • Como posso enviar um formulário de várias páginas no SvelteKit com ações de formulário?

  • Implemente o Svelte em um único contêiner HTML

  • Ao visualizar um componente svelte no VSCode, como ir para o arquivo pai que importa este componente

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    Reformatar números, inserindo separadores em posições fixas

    • 6 respostas
  • Marko Smith

    Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não?

    • 2 respostas
  • Marko Smith

    Problema com extensão desinstalada automaticamente do VScode (tema Material)

    • 2 respostas
  • Marko Smith

    Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

    • 1 respostas
  • Marko Smith

    Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

    • 1 respostas
  • Marko Smith

    Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

    • 6 respostas
  • Marko Smith

    `(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

    • 3 respostas
  • Marko Smith

    Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

    • 1 respostas
  • Marko Smith

    PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

    • 2 respostas
  • Marko Smith

    AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

    • 1 respostas
  • Martin Hope
    Fantastic Mr Fox Somente o tipo copiável não é aceito na implementação std::vector do MSVC 2025-04-23 06:40:49 +0800 CST
  • Martin Hope
    Howard Hinnant Encontre o próximo dia da semana usando o cronógrafo 2025-04-21 08:30:25 +0800 CST
  • Martin Hope
    Fedor O inicializador de membro do construtor pode incluir a inicialização de outro membro? 2025-04-15 01:01:44 +0800 CST
  • Martin Hope
    Petr Filipský Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não? 2025-03-23 21:39:40 +0800 CST
  • Martin Hope
    Catskul O C++20 mudou para permitir a conversão de `type(&)[N]` de matriz de limites conhecidos para `type(&)[]` de matriz de limites desconhecidos? 2025-03-04 06:57:53 +0800 CST
  • Martin Hope
    Stefan Pochmann Como/por que {2,3,10} e {x,3,10} com x=2 são ordenados de forma diferente? 2025-01-13 23:24:07 +0800 CST
  • Martin Hope
    Chad Feller O ponto e vírgula agora é opcional em condicionais bash com [[ .. ]] na versão 5.2? 2024-10-21 05:50:33 +0800 CST
  • Martin Hope
    Wrench Por que um traço duplo (--) faz com que esta cláusula MariaDB seja avaliada como verdadeira? 2024-05-05 13:37:20 +0800 CST
  • Martin Hope
    Waket Zheng Por que `dict(id=1, **{'id': 2})` às vezes gera `KeyError: 'id'` em vez de um TypeError? 2024-05-04 14:19:19 +0800 CST
  • Martin Hope
    user924 AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos 2024-03-20 03:12:31 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve