Supongo que te refieres a estos documentos: https://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive

En este caso, creo que están hablando de la función de sintaxis del lenguaje de programación llamada "etiqueta". En el caso de JS, puede leer sobre esto aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label

Es necesario mirar atentamente el código fuente de Svelte, pero supongo que usan este patrón de sintaxis JS válido $: para marcar declaraciones de nivel superior y permitirles luego analizarlas y preprocesarlas.

Entonces, no es una magia JS negra, sino una convención solo en el "mundo" Svelte.

Actualizar:

Creo que se usó en algún lugar aquí en el código fuente: https://github.com/sveltejs/svelte/blob/0d017f482016caa51d34918f79dc0b83f0428fd7/src/compiler/compile/Component.ts#L651

Si desea seguir la lógica, observe el uso de "LabeledStatement".

¿Cómo harías esto en Vanilla JavaScript? comprobando el código que ha sido cambiado

Hay varios enfoques para esto. Por ejemplo, comprobación sucia comparando valores anteriores con valores actuales y determinando así los cambios. Este enfoque tiene algunas desventajas. Entre otros, los datos pueden duplicarse y el rendimiento puede degradarse para grandes cantidades de datos debido a todas las comparaciones necesarias.

Otro método sería hacer que las dependencias sean explícitas y solo actualizarlas cuando cambie una de las dependencias. Svelte genera el código necesario para eso automáticamente, pero también se puede hacer manualmente. Si observa el código generado, encontrará que las variables se marcan como invalidadas, lo que activa las actualizaciones de las variables dependientes.

Por ejemplo, en un controlador de clics que incrementa una variable de recuento, obtienes:

 const click_handler = () => $$invalidate(0, count++, count);

Para la declaración reactiva, el código solo se ejecuta si se ha cambiado el count :

 $$self.$$.update = () => { if ($$self.$$.dirty & /*count*/ 1) { $: doubled = count * 2; } };

Sin embargo, este código está optimizado para el rendimiento. Utiliza índices de matriz para un acceso a datos más rápido y un código más eficiente. Para el código destinado a ser escrito y leído por humanos, es posible que desee no hacer eso. En general, no recomendaría hacer esto manualmente de ninguna manera; es más detallado y debe asegurarse de especificar siempre las dependencias correctamente para que funcione.

El $: es una sintaxis Svelte especial y no "funciona" en javascript vainilla.

La sintaxis es compatible con javascript vainilla (es una declaración etiquetada ), por lo tanto, las herramientas como los analizadores y resaltadores de javascript no se rompen.

Pero vanilla javascript no tiene ninguna reactividad incorporada, por lo que se comporta de manera muy diferente.
(Ignora el $: )

La escucha de cambios en variables primitivas no se puede hacer en vanilla.
Hay muchas soluciones disponibles .