0

我不了解litWeb 组件架构中的反应性概念。从其他框架中，我假设以下示例将毫无问题地更新，但它不适用于lit.

我可以看到子组件render方法仅在最初被调用，而不是在我单击按钮后再次被调用。但即使我通过 手动调用它Web Components DevTools，它也不会以新状态重新渲染。

我必须改变什么才能让它工作？

父组件：

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

子组件：

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

1 回答 1

1

LitElement 的属性系统只观察引用的变化。递归监听子属性的变化会非常昂贵，尤其是对于大型嵌套对象。

因此，设置的子属性或孙子属性this.planetsParent不会触发渲染。

那么如果我们需要更新一个嵌套的孩子怎么办呢？不可变数据模式可以帮助我们。

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

参考：https ://open-wc.org/guides/knowledge/lit-element/rendering/#litelement-rendering

于 2022-02-04T00:24:08.117 回答