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>

  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去做文章，其实有很多其他的方法，这里只是把我在做项目中的用到的方法分享下！