如何监听
在我们开发项目中，如果有遇到需要监听某一个值变化后，做出一些特殊操作，正常的双向绑定数据都可以直接有API能够监听到变化，像Vue的watch ， Angular的ngDoCheck 、ngOnChanges 、React的useEffect 等，但是如果我们项目中需要监听某个框架内部的值变化后，调用一些方法，如果上面方法都无法满足该怎么处理？
使用Vue2原理监听
//记得在监听的时候，在上面再赋值一遍，防止set的时候为null Object.defineProperty(dataParent, key, { get() { return value; }, set(newVal) { const oldVal = value; value = newVal; //当监听值改变后执行操作 watcher$.next({ newVal, oldVal }); } }); //分割线 //下面使用了rxjs来通知值变化后执行操作，并停止监听后进行销毁 this.setOptions(this.props.options) this.watchData(this.props, 'options', this.destroy$).subscribe(x => { this.setOptions(x.newVal); }); watchData(dataParent: any, key: string, destroy$: Subject<void>) { const watcher$ = new Subject<{ newVal: any; oldVal: any }>(); 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(destroy$)); }
