LitElement父组件更新状态后子组件未重新渲染如何解决？

Lit 对 @property 修饰的数组、对象这类引用类型的响应式属性，默认仅检测引用地址的变更。你当前使用 push 方法是对数组的原地修改，数组本身的引用地址没有发生变化，Lit 无法识别到属性更新，因此不会触发组件重新渲染。

推荐使用「生成新引用赋值」的方式修改数组，不需要修改其他逻辑，仅调整父组件的 addPlanet 方法即可：

addPlanet() {
    // 用扩展运算符生成新数组，替换原有数组引用
    this.planetsParent = [...this.planetsParent, 'Pluto']
    console.log('this.planetsParent', this.planetsParent)
}

如果确实需要原地修改数组/对象，可以在修改完成后手动调用 this.requestUpdate() 强制触发组件更新，不过这种方式不推荐，不符合 Lit 的响应式设计规范。
子组件不需要做任何修改，只要父组件传递的 planetsChild 属性引用发生变化，子组件会自动触发重渲染。

不光是数组，普通对象的响应式修改也遵循同样规则：不要直接修改对象的内部属性，要生成新的对象引用再赋值，示例：

// 错误写法（原地修改，无引用变更）
this.userInfo.name = '张三'
// 正确写法（生成新对象引用）
this.userInfo = {...this.userInfo, name: '张三'}

如果是嵌套层级较深的对象/数组，可以使用 structuredClone 深拷贝生成新引用后再做修改。

内容的提问来源于stack exchange，提问作者sunwarr10r