AngularJs 生命周期$onChanges钩子函数总结

1.概念

1.可变对象（在js中，对象是可变的）

var person ={
	name:'张三',//在对象中创建了一个值为张三的name对象
	age:'18'
}
person.name ='李四' //给name赋值一个新的值,这个时候并不会个对象name分配新的内存地址,而是在原来的地址上修改了原来的值

2.不可变对象
字符串是不可变的，也是说当一个字符串在内存中被创建后，他的值永远是不变的！

var name =' 张三'; //创建一个值为张三的字符串
    name='李四'   //内存中重新分配了个地址指向新的字符串李四

3.$onChanges概念
当父子组件之间发生传值时，父把值传给子组件，当这个值得发了变化，你想让子也能感应到这个值变化，此时要用到$onChanges,如果你传的是一个对象，这里你要区分到底可变对象和不可变对象，只是改变对象的某个属性是不会触发$onChanges，如果你传的是不可变对象（类似字符串），如果这个值改变，子会触发$onChanges。

1.例子

可变对象的
html

<div ng-controller='mainController as vm' ng-click="vm.clicked()">
        <b-test config='vm.test'></b-test>
</div>

js

  var app = angular.module('mainApp', []);
    app.controller('mainController', function () {
        var vm = this;
        vm.test = {
            a: 1,
            b: 2
        };
        vm.clicked = function () {
            vm.test.a = 2;
        };
    });
    app.component("bTest", {
        template: "<div>b</div>",
        controllerAs: 'ctrl',
        bindings: {
            config: '<',
        },
        controller: [function () {
            var ctrl = this;
            ctrl.$onChanges = function (changes) {
                console.log('子组件方法执行');
            };
        }]
    })

这里父组件里面传一个test对象给子组件， 当点击父时候改变test对象里面的a属性值，并没有这个对象改变引用地址，所以子组件的$onChanges不会执行，如果是点击父时候把整个test对象改变了，相当于重新指向了一个新的引用地址，子组件的$onChanges会执行！

不可变对象

   <div ng-controller='mainController as vm' ng-click="vm.clicked()">
        <b-test config='vm.test.a'></b-test>
   </div>

其他代码不变，只是把test一个a属性传给子，这是个不可变对象，所以子组件的$onChanges会执行！这里有个坑！如果你绑定的不是单向绑定('<')而是双向绑定('=')是不会触发$onChanges事件的!

扩展下
当父传值给子组件，子组件接受到这个值并且改变这个值，这个时候怎么让父组件更新这个值变化！
html

 <div ng-controller='mainController as vm' ">
        <b-test config='vm.test.a' on-update="vm.upDate($event);"></b-test>
    </div>

在子组件里面有个upDate方法 是父传进去的
js

    var app = angular.module('mainApp', []);
    app.controller('mainController', function () {
        var vm = this;

        vm.test = {
            a: 1,
            b: 2
        };
        vm.upDate = function (event) {
            this.test = event.test;
            console.log(this.test);
        };

    });

    app.component("bTest", {
        template: "<button ng-click='ctrl.clicked()'>b</button>",
        transclude: true,
        controllerAs: 'ctrl',
        bindings: {
            config: '<',
            onUpdate: '&'
        },
        controller: [function () {
            var ctrl = this;
            ctrl.clicked = function () {
                ctrl.config.a = 2;
                ctrl.onUpdate({
                    $event: {
                        test: ctrl.config
                    }
                });
            };
        }]
    })

当子触发点击事件，改变了父传进来的值，然后子组件利用父组件传进来的方法，然后把值放到event 事件上，这样就相当调用了父组件上的upDate方法，然后值是通过event传进来的，这样父就能更新值的变化，如果是父组件改变的值的话，子组件可以通过$onChanges去做文章，其实有很多其他的方法，这里只是把我在做项目中的用到的方法分享下！