perf($compile): do not use deepWatch in literal one-way bindings

Avoiding deep watchers for array/object literals will improve watcher
performance of all literals passed as one-way bindings, especially those
containing references to large/complex objects.

BREAKING CHANGE:
Previously when a literal value was passed into a directive/component via
one-way binding it would be watched with a deep watcher.

For example, for `<my-component input="[a]">`, a new instance of the array
would be passed into the directive/component (and trigger $onChanges) not
only if `a` changed but also if any sub property of `a` changed such as
`a.b` or `a.b.c.d.e` etc.

This also means a new but equal value for `a` would NOT trigger such a
change.

Now literal values use an input-based watch similar to other directive/component
one-way bindings. In this context inputs are the non-constant parts of the
literal. In the example above the input would be `a`. Changes are only
triggered when the inputs to the literal change.

Closes #15301

Author: jbedard

src/ng/compile.js

@@ -3523,21 +3523,21 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             if (optional && !attrs[attrName]) break;
 
             parentGet = $parse(attrs[attrName]);
-            var deepWatch = parentGet.literal;
+            var isLiteral = parentGet.literal;
 
             var initialValue = destination[scopeName] = parentGet(scope);
             initialChanges[scopeName] = new SimpleChange(_UNINITIALIZED_VALUE, destination[scopeName]);
 
             removeWatch = scope.$watch(parentGet, function parentValueWatchAction(newValue, oldValue) {
               if (oldValue === newValue) {
-                if (oldValue === initialValue || (deepWatch && equals(oldValue, initialValue))) {
+                if (oldValue === initialValue || (isLiteral && equals(oldValue, initialValue))) {
                   return;
                 }
                 oldValue = initialValue;
               }
               recordChanges(scopeName, newValue, oldValue);
               destination[scopeName] = newValue;
-            }, deepWatch);
+            });
 
             removeWatchCollection.push(removeWatch);
             break;

test/ng/compileSpec.js

@@ -4306,6 +4306,78 @@ describe('$compile', function() {
           });
 
 
+          it('should trigger `$onChanges` for literal expressions when expression input value changes (simple value)', function() {
+            var log = [];
+            function TestController() { }
+            TestController.prototype.$onChanges = function(change) { log.push(change); };
+
+            angular.module('my', [])
+              .component('c1', {
+                controller: TestController,
+                bindings: { 'prop1': '<' }
+              });
+
+            module('my');
+            inject(function($compile, $rootScope) {
+              element = $compile('<c1 prop1="[val]"></c1>')($rootScope);
+
+              $rootScope.$apply('val = 1');
+              expect(log.pop()).toEqual({prop1: jasmine.objectContaining({previousValue: [undefined], currentValue: [1]})});
+
+              $rootScope.$apply('val = 2');
+              expect(log.pop()).toEqual({prop1: jasmine.objectContaining({previousValue: [1], currentValue: [2]})});
+            });
+          });
+
+
+          it('should trigger `$onChanges` for literal expressions when expression input value changes (complex value)', function() {
+            var log = [];
+            function TestController() { }
+            TestController.prototype.$onChanges = function(change) { log.push(change); };
+
+            angular.module('my', [])
+              .component('c1', {
+                controller: TestController,
+                bindings: { 'prop1': '<' }
+              });
+
+            module('my');
+            inject(function($compile, $rootScope) {
+              element = $compile('<c1 prop1="[val]"></c1>')($rootScope);
+
+              $rootScope.$apply('val = [1]');
+              expect(log.pop()).toEqual({prop1: jasmine.objectContaining({previousValue: [undefined], currentValue: [[1]]})});
+
+              $rootScope.$apply('val = [2]');
+              expect(log.pop()).toEqual({prop1: jasmine.objectContaining({previousValue: [[1]], currentValue: [[2]]})});
+            });
+          });
+
+
+          it('should trigger `$onChanges` for literal expressions when expression input value changes instances, even when equal', function() {
+            var log = [];
+            function TestController() { }
+            TestController.prototype.$onChanges = function(change) { log.push(change); };
+
+            angular.module('my', [])
+              .component('c1', {
+                controller: TestController,
+                bindings: { 'prop1': '<' }
+              });
+
+            module('my');
+            inject(function($compile, $rootScope) {
+              element = $compile('<c1 prop1="[val]"></c1>')($rootScope);
+
+              $rootScope.$apply('val = [1]');
+              expect(log.pop()).toEqual({prop1: jasmine.objectContaining({previousValue: [undefined], currentValue: [[1]]})});
+
+              $rootScope.$apply('val = [1]');
+              expect(log.pop()).toEqual({prop1: jasmine.objectContaining({previousValue: [[1]], currentValue: [[1]]})});
+            });
+          });
+
+
           it('should pass the original value as `previousValue` even if there were multiple changes in a single digest', function() {
             var log = [];
             function TestController() { }
@@ -5832,7 +5904,7 @@ describe('$compile', function() {
             }));
 
 
-            it('should deep-watch array literals', inject(function() {
+            it('should watch input values to array literals', inject(function() {
               $rootScope.name = 'georgios';
               $rootScope.obj = {name: 'pete'};
               compile('<div><span my-component ow-ref="[{name: name}, obj]">');
@@ -5846,7 +5918,7 @@ describe('$compile', function() {
             }));
 
 
-            it('should deep-watch object literals', inject(function() {
+            it('should watch input values object literals', inject(function() {
               $rootScope.name = 'georgios';
               $rootScope.obj = {name: 'pete'};
               compile('<div><span my-component ow-ref="{name: name, item: obj}">');