"LitElement 不会从父组件更新子组件"

Question

I don't understand the concept of reactivity in lit<\/code> 's web components architecture. From other frameworks I come up with the assumption that the following example would update without problem, but it doesn't work with lit<\/code> .

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>
        `;
    }
}

Answer 1

LitElement's property system only observes changes to the reference. Recursively listening for changes to child properties would be prohibitively expensive, especially for large nested objects.

addPlanet() {
    const [...rest] = this.planetsParent;
    const newItem = 'Pluto';
    this.planetsParent = [newItem, ...rest];
}