Polymer/Lit 元素，当父组件修改属性时，子组件不会重新渲染

Question

live example

基本上:

我将子组件放在父组件的 html 中。

子组件有一个属性 title内static get properties()目的。

在父组件中，我分配了子组件的 title属性到不在 static get properties() 中的私有(private)变量父组件的。

后来，在 setTimeout在父组件内，我更改了私有(private)变量的值。

子组件不会重新渲染。

//inside parent component
render(){
 return html`
   <child-component title="${this._privateVariable}"></child-component>
 `
}

constructor(){
 super();
 this._privateVariable = 'lore ipsum'

 setTimeout(()=>{
  this._privateVariable = '123455667'
 }, 10000)
}

现在，我知道如果我输入 _privateVariable在 static get properties()对于父组件，子组件会重新渲染，但那是因为整个父组件都在重新渲染。

一旦附加到 DOM，子组件就会监视他的 title 属性，因此它应该意识到分配给它的值发生了变化并重新渲染。

我不明白为什么我必须重新渲染整个父级才能让 child 重新渲染。

使用开发者控制台并访问 DOM 中的组件:

如果我使用 javascript 更改子组件的属性，则子组件可以完美地重新呈现，而不必重新呈现整个父元素。

如果我编辑子组件的 html 并手动更改属性，则子组件可以完美地重新呈现，而不必重新呈现整个父元素。

我在这里缺少什么？

Answer 1

我在 GitHub 上回答:https://github.com/Polymer/lit-element/issues/899#issuecomment-592295954

但这是给其他读者的副本:

@dvolp 子组件正在观察它的 title 属性，但它没有观察父组件的 _privateVariable 属性。如果没有在静态属性对象中将 _privateVariable 声明为 LitElement 属性，父组件也不会观察该属性。

设置 _privateVariable 时需要重新渲染父级，因为重新渲染会将子级的 title 属性设置为 _privateVariable 的当前值。

此处的绑定(bind)仅在渲染上运行。如果未运行，则无需设置 title 属性:

//inside parent component
render(){
 return html`
   <child-component title="${this._privateVariable}"></child-component>
 `
}

这正是您必须在父组件的静态属性对象中包含 _privateVariable 的原因，以便在您设置它时，父组件会收到通知并重新渲染，从而在子组件上设置 title 属性。