How to monitor a complex object state?

[Linya-IronMan]

The feature I hoped is like watch in Vue. It can monitor the specific property in target object.

@Watch("target")
targetChange() { }

@Watch("target.name")
targetNameChange() { }

I find a similar feature at decorator state —— hasChange.

But It can only monitor the whole object.

Is there any function I want ?

[e111077]

Lit does not have this out the box for performance reasons. Lit @property() asdf under the hood is essentially set asdf() {... this.requestUpdate('asdf', oldValue)} and a get asdf() {return this.__asdf}. This is why setting a specific property won't trigger a change in lit.

Though there is nothing stopping you from writing your own @watch directive. e.g.

class MyEl extends LitElement {
  @property({type: Object})
  @watch('account.email')
  user: User|null = null;
}

Back in the Polymer days we used Object.observe() which is now gone. Perhaps something else can be implemented using ES6 Proxies that call this.requstUpdate('user.account.email', oldValue)