Lit Element输入框值未重置：数据绑定未二次生效原因排查

使用Lit Element开发时，存在一个single-transaction组件。操作流程如下：

• 从交易列表页点击某条交易进入单交易页面
• 将notes输入框的值从'foo'修改为'bar'
• 不保存修改，返回主页面
• 再次进入该单交易页面

此时notes输入框仍显示修改后的'bar'，而非未保存的原始值'foo'。父组件通过.singleTransData=${this.singleTransData}传递数据，但数据绑定未触发更新。

父组件代码：

<single-transaction
  data-el="add-category"
  .singleTransData=${this.singleTransData}
  id="single-transaction"></single-transaction>

single-transaction组件代码：

static properties = {                                                
  singleTransData: {                                                 
    type: Object,                                                    
  },                                                                
  label: {                                                           
    type: String,                                                    
  },                                                                
};                                                                   

constructor() {                                                      
  super();                                                           
  this.singleTransData = {};                                         
}                                                                    

render() {                                                           
  return html`                                                       
        <mwc-icon-button                                             
          @click=${this.#leavePage}                                  
          icon="arrow_back"></mwc-icon-button>                       
        <span class="row">                                           
          <md-outlined-text-field                                    
            label="notes"                                            
            data-key="notes"                                         
            value="${this.singleTransData.notes}"                    
            ></md-outlined-text-field>                               
        </span>                                                      
  `                                                                  
} 

1. 引用类型数据的直接修改：singleTransData是对象类型（引用类型），操作输入框时如果直接修改了singleTransData.notes，本质是修改了父组件中this.singleTransData的引用对象，导致父组件源数据已被更改，再次进入时传递的就是修改后的值。
2. Lit的属性更新机制：Lit默认对对象类型属性做浅比较，如果父组件传递的singleTransData引用没有变化，即使内部属性改变，子组件不会触发重新渲染或属性更新。

方案1：传递数据副本，避免修改源对象 #

父组件传递数据时创建对象副本，让子组件修改的是副本而非父组件源数据：

<single-transaction
  data-el="add-category"
  .singleTransData=${{...this.singleTransData}}
  id="single-transaction"></single-transaction>

如果对象存在嵌套结构，需要用深克隆（比如JSON.parse(JSON.stringify(this.singleTransData))，注意该方法不支持函数、Symbol等特殊类型）。

方案2：子组件维护本地数据副本 #

子组件内部创建本地数据属性，不直接修改传入的singleTransData，每次属性更新时同步本地副本：

static properties = {                                                
  singleTransData: {                                                 
    type: Object,                                                    
  },                                                                
  label: {                                                           
    type: String,                                                    
  },                                                                
};                                                                   

constructor() {                                                      
  super();                                                           
  this.singleTransData = {};
  this.localData = {};                                         
}                                                                    

willUpdate(changedProperties) {
  // 当singleTransData属性变化时，更新本地副本
  if (changedProperties.has('singleTransData')) {
    this.localData = {...this.singleTransData};
  }
}

render() {                                                           
  return html`                                                       
        <mwc-icon-button                                             
          @click=${this.#leavePage}                                  
          icon="arrow_back"></mwc-icon-button>                       
        <span class="row">                                           
          <md-outlined-text-field                                    
            label="notes"                                            
            data-key="notes"                                         
            value="${this.localData.notes}"                    
            ></md-outlined-text-field>                               
        </span>                                                      
  `                                                                  
} 

修改输入框时绑定到localData.notes，只会修改本地副本，不会影响父组件源数据。再次进入时，父组件传入的原始数据会重新覆盖本地副本，显示正确初始值。

方案3：确保父组件传递原始数据 #

如果父组件的singleTransData来自接口或状态管理，返回主页面后再次进入时，重新获取该交易的原始数据（比如重新请求接口、从原始数据源中提取），确保传递给子组件的是未修改的对象引用。

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