No entiendo el concepto de reactividad en la arquitectura de componentes web de lit De otros marcos, supuse que el siguiente ejemplo se actualizaría sin problemas, pero no funciona con lit .
Puedo ver que el método de render de componentes secundarios solo se llama inicialmente y no nuevamente después de hacer clic en el botón. Pero incluso si lo llamo manualmente a través de Web Components DevTools , no se vuelve a renderizar con el nuevo estado.
¿Qué tengo que cambiar para que funcione?
Componente principal:
import {LitElement, html} from 'lit'; import {customElement, property} from 'lit/decorators.js'; import './show-planets'; @customElement('lit-app') export class LitApp extends LitElement { addPlanet() { this.planetsParent.push('Pluto') console.log('this.planetsParent', this.planetsParent) } @property({type: Array}) planetsParent = ['Mars']; render() { return html` <button @click="${this.addPlanet}">click</button> <show-planets .planetsChild="${this.planetsParent}"></show-planets> `; } }Componente hijo:
import {LitElement, html} from 'lit'; import {customElement, property} from 'lit/decorators.js'; @customElement('show-planets') export class ShowPlanets extends LitElement { @property({type: Array}) planetsChild = ['Pluto']; render() { console.log('this.planetsChild', this.planetsChild); return html`<h1>Planets are: ${this.planetsChild}</h1>`; } }El sistema de propiedades de LitElement solo observa cambios en la referencia. La escucha recursiva de cambios en las propiedades secundarias sería prohibitivamente costosa, especialmente para objetos grandes anidados.
Por lo tanto, establecer una propiedad secundaria o secundaria de this.planetsParent no activará un procesamiento.
Entonces, ¿qué podemos hacer si necesitamos actualizar un niño anidado? Los patrones de datos inmutables pueden ayudarnos.
addPlanet() { const [...rest] = this.planetsParent; const newItem = 'Pluto'; this.planetsParent = [newItem, ...rest]; }Referencia: https://open-wc.org/guides/knowledge/lit-element/rendering/#litelement-rendering