It occurred to me that Vue could deep watch an object and provide a callback

What about Angular? A: ngDoCheck adds an if, and then determines the depth of the object

Then I found something awesome from StackOverflow

import { KeyValueChanges, KeyValueDiffer, KeyValueDiffers } from '@angular/core'; export class Customer { firstName: string; favoriteColor: string; } @Component({ selector: 'my-app', templateUrl: `./app.component.html` }) export class AppComponent { private customerDiffer: KeyValueDiffer<string, any>; private customer: Customer; constructor(private differs: KeyValueDiffers) {} ngOnInit(): void { this.customer = new Customer(); this.customerDiffer = this.differs.find(this.customer).create(); } customerChanged(changes: KeyValueChanges<string, any>) { console.log('changes'); /* If you want to see details then use changes.forEachRemovedItem((record) => ...) ; changes.forEachAddedItem((record) => ...) ; changes.forEachChangedItem((record) => ...) ; */ } ngDoCheck(): void { const changes = this.customerDiffer.diff(this.customer); if (changes) { this.customerChanged(changes); }}}Copy the code

Stackoverflow.com/questions/4…

However, ngDoCheck is called frequently, and while performance is generally fine, it can cause performance problems if it is not used properly. Consider returning to RXJS, or more close to the active push approach, should be better, if you want to do further in-depth monitoring, with the differ service found above, but in fact, direct use of LoDash, simple as well

/** * Listen on the specified property to return a subscriptable Watcher similar to vue * automatically unsubscribe via takeUntil * @param dataParent object reference * @param key property name * @param destory$ * @returns */ export function watchData$$(dataParent: unknown, key: string, destory$: Subject<void>) { const watcher$ = new Subject<{newVal, oldVal}>(); let value = dataParent[key]; Object.defineproperty (dataParent, key, {get() {return value}, set(newVal) { const oldVal = value; value = newVal; watcher$.next({newVal, oldVal}); }}); return watcher$.pipe(takeUntil(destory$)); }Copy the code