How to implement deep watch on an object in AngularJS without causing performance optimization?
I'm integrating two systems and I'm working on a personal project and I've been struggling with this for a few days now and could really use some help..... I'm trying to set up a deep watch on a complex object in my AngularJS app (v1.8.2) to track changes and update the view accordingly. However, I've noticed that performance degrades significantly when the object has a lot of nested structures. My current implementation looks something like this: ```javascript $scope.myObject = { level1: { level2: { level3: 'initial' } } }; $scope.$watch('myObject', function(newValue, oldValue) { if (newValue !== oldValue) { console.log('Object changed!', newValue); } }, true); ``` While this works as intended, I've encountered performance lags, especially when the object grows in size and complexity. I also noticed the digest cycles taking longer than expected, resulting in a noticeable delay in UI updates. I've tried optimizing it by using a custom function to limit the watch to specific properties: ```javascript $scope.$watch('myObject.level1.level2', function(newValue, oldValue) { if (newValue !== oldValue) { console.log('Nested object changed!', newValue); } }); ``` This approach improved performance slightly, but I still need a way to monitor deep changes efficiently without unnecessary digest cycles. Is there a best practice to implement deep watching on such objects, or a better alternative to achieve the same result? Any help would be greatly appreciated! My development environment is Windows. I'd really appreciate any guidance on this. I'm working on a CLI tool that needs to handle this. Is there a better approach? This is part of a larger API I'm building. What's the correct way to implement this? The project is a CLI tool built with Javascript. How would you solve this?