Javascript Web组件：属性是否有与attributeChangedCallback等效的属性？

您不应该将丰富的数据（对象、数组、函数）放入HTML元素属性中。相反，建议只在属性中放置丰富的数据（根据）。我需要在更新这些属性时运行操作。我们有

观察到的属性

和

属性更改回调

，但属性没有类似之处

假设我有一个

用户

道具，上面有

名称

，

DoB

，以及

地址

。我想我可以通过把床铺设置器放在洛杉矶来欺骗被观察到的属性

没用

返回此值。user=val

给出一个无限循环

目前我唯一的想法是在每次更改时都设置一个名为

\u user

的属性，该属性只需设置为

[Object Object]

，即可触发我真正想要的更改。但我不喜欢这样

更新：这就是我目前正在做的事情

在

user info.js

中：

class UserInfo extends HTMLElement {
  connectedCallback() {
    subscribers.push({ element: this, props: ['user'] });
    this._user = state.user;
    this.render();
  }
  static get observedAttributes() {
    return ['user'];
  }
  attributeChangedCallback(name, oldValue, newValue) {
    this.render();
  }
  get user() {
    return this._user;
  }
  set user(val) {
    if (JSON.stringify(val) !== JSON.stringify(this._user)) {
      this._user = val;
      return this.setAttribute('user', val);
    }
  }
  render() {
    this.innerHTML = `<span>${this._user.name}</span> was born on <span>${this._user.dob}</span>`;
  }
}

document.querySelector('.actions--user').addEventListener('input', e => {
  state.user = {...state.user, [e.target.dataset.action]: e.target.value};
})

可以使用来检测对象的更新属性

customElements.define（'user info'，类扩展了HtmleElement{
connectedCallback（）{
此用户为。\u用户={
姓名：“布鲁诺”，
出生日期：2000年1月1日
}
这个。render（）；
this.\u proxy=新代理（this.\u用户{
设置：（对象、属性、值）=>{
如果（prop==='name'）
if（this.\u user.name！==val）{
console.log（'username更新为'+val〕）
这是。_user.name=val
this.render（）
}
}
} )
}
获取用户（）{
返回此代理。\u
}
设置用户（val）{
if（JSON.stringify（val）！==JSON.stringify（此用户））{
这是.\u user=val
this.render（）
}
}
render（）{
this.innerHTML=`${this.\u user.name}出生于${this.\u user.dob}`
}
}）

名称：

如果您正在使用该属性，那么为什么还要处理该属性呢。看起来太过分了。哇，这正是我想要的。谢谢大家!@Bennyhinrich谢谢，我添加了一个替代解决方案（无代理）

document.querySelector('.actions--user').addEventListener('input', e => {
  state.user = {...state.user, [e.target.dataset.action]: e.target.value};
})