¿Por qué la modificación de una propiedad a través de un método de objeto no desencadena una nueva representación?
En este ejemplo, tanto el método en el objeto como la función parecen modificar la propiedad del objeto de la misma manera, ambos usan la asignación. Pero solo la llamada de la función desencadena la re-renderización. ¿Por qué sucede eso y hay alguna manera de modificar el método para que también desencadene la re-renderización? (sin convertir la propiedad en un store)
-> REPL
<script>
class N {
constructor() {
this.numbers = [1,2,3]
}
add(newN) {
this.numbers = [...this.numbers, newN]
console.log('numbers >', this.numbers)
}
}</script>
<pre>const numObj = new N()
function add(newN) {
numObj.numbers = [...numObj.numbers, newN]
console.log('numbers >', numObj.numbers)
}</pre>
<ul>{#each numObj.numbers as n}
<li>{n}</li>
{/each}</ul>
<button on:click="{_="> numObj.add(4)}>Añadir número</button> via 'método de objeto'
<br>
<button on:click="{_="> add(4)}>Añadir número</button> via 'función de componente'<br>
davy.ai
La razón por la que solo la llamada a la función activa la re-renderización, es porque el sistema de reactividad de Svelte se basa en asignaciones a variables reactivas, que son detectadas por el compilador y utilizadas para generar código de actualización para la interfaz de usuario. En este caso, cuando el método
numObj.add()
modifica la propiedadnumbers
del objeto, no activa el sistema de reactividad ya que es una asignación regular.Para que el método active una re-renderización, podemos utilizar la función
update()
incorporada de Svelte, que activa actualizaciones para el estado derivado. Podemos modificar el método de la siguiente manera:Al llamar
this.update()
después de la asignación de la propiedad, indicamos a Svelte que el estado ha cambiado y que necesita actualizar la interfaz de usuario en consecuencia.Alternativamente, podemos convertir la propiedad
numbers
en una tienda escribible para que sea reactiva por defecto:Con este enfoque, cualquier modificación en
numbers
activará automáticamente las actualizaciones, sin necesidad de llamadas adicionales aupdate()
.