Luego en Vue, las señales se llaman refs, y creas una con la función ref, y lo que obtienes de vuelta es un objeto. El objeto tiene un punto value que parece ser una propiedad, pero en realidad, bajo el capó, está implementado con una función getter y una función setter. Así que es, de nuevo, dos llamadas a funciones, aunque no lo parezca aquí. Puedes simplemente hacer el plus plus, y en realidad lo que sucede son dos llamadas a funciones. En la plantilla, no tienes que poner el value, pero eso es porque Vue lo analiza y lo maneja por ti.
Luego también está en Svelte, por ejemplo, la implementación de señales se llama runes, pero no tenemos tiempo para profundizar mucho en eso. Bien. Así que comencemos a construir algo. Voy a tener que ir bastante rápido porque el límite de tiempo es de 20 minutos, así que espero que puedas seguir y trataré de explicar. Así que primero comenzaremos definiendo la función signal, que actúa como el contenedor para el valor. Devolveremos un objeto que tiene un método getter y un método setter para el valor. Así que en este caso, lo haremos un poco al estilo de Vue.js usando los métodos getter y setter. Pero en este punto, lo que tenemos no es tan emocionante aún. Es básicamente como una variable que podemos instanciar, y luego podemos cambiar el valor. Y si hacemos console.log así, y si luego ejecutamos, sí, no es tan emocionante.
Pero antes, cuando dije que la función sabe cuándo se llama, no es nada emocionante, solo que podemos ejecutar código aquí. Eso es básicamente lo que quiero decir. Podemos ejecutar código aquí para que podamos ver que los métodos get y set se llaman cuando el valor se usa dentro de la función. Ahora, si recuerdas de la diapositiva, había dos puntos. Así que el primero era saber cuándo cambia un valor, perdón, saber quién usa el valor. Así que para comenzar con eso, aquí en el método getter, necesitamos rastrear quién usa el valor. Para eso implementaremos una función track, que tomará una señal como parámetro. Y luego necesitamos un lugar para almacenar de alguna manera el uso. Así que definamos un usage ya que usaremos un WeakMap para esto. Y la razón por la que estamos usando WeakMap es que en lugar de un objeto normal, podemos usar el objeto de señal en sí como la clave. Así que podemos verificar si ya hay algo allí. Y si no, entonces podemos establecerlo como un array vacío. Y luego continuando, obtendremos, y luego tendremos el array y pondremos algo en el array. Pero, ¿qué deberíamos poner allí? Bien. Ahora, el objetivo aquí es que podamos deshacernos del segundo console log.
Comments