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會執行！

擴展下
當父傳值給子組件，子組件接受到這個值並且改變這個值，這個時候怎麼讓父組件更新這個值變化！
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去做文章，其實有很多其他的方法，這裏只是把我在做項目中的用到的方法分享下！