组件化开发——组件生命周期

最近刚刚换了工作，原来一直用angular系列，本来一直看好react的，结果facebook自己非要作死，结果就让vue直飞冲天了，现在工作中也用到vue,熟悉之余顺便记下一笔。后续可能会有weex先关的，暂且记录一下。
今天看了一下vue的生命周期，顺便和之前用的angular、react进行一下对比：

1. 组件化与virtualDOM、shadowDOM

目前前端领域的三大框架都是用了组件化开发的设计思想，即web页面构建都不同程度使用了virtualDOM,即我们熟知的虚拟DOM技术。虚拟DOM，本质上来说就是开发者可以使用自定义的标签元素，来扩展W3C标准的标签元素，进而构建灵活的web应用页面。其实webkit里面有一个与之非常相似的shadowDOM，随便打开一个浏览器，打开一个视频网站，审查元素选中一个vedio,将浏览器设置,勾选Show user agent shadow DOM, 你就看到了一个shadow DOM，而这个shadowDOM开发者是可以创建可控制的。

是的，这就是virtual DOM的蓝本。只不过把所有的属性、数据都当做shadowDom的参数传递到shadowDom内部而已， 不管vue、react还是angular的组件，都是这个思想的另一种实现方式。
组件化思想说通俗点就是开发者自定义组件，组件化思想的技术实现不过如此而已。。。

2.组件渲染

了解了组件化的技术，我们在来分析一下一个组件在web页面从无到有，再到无的会经历的几个过程及状态。
①定义/创建组件：定义组件的各种属性、数据、相关的方法、状态
②渲染/挂载组件：确定组件在DOM树种渲染的位置、时机
③操作/更改组件：修改组件的相关属性、状态、数据，进行组件之间的通讯
④删除/销毁组件：将组件从DOM树种移除
对比三大框架都不约而同(xiang hu chao xi)的定义了一个组件的生命周期，并开发其接口，以便开发者在适当的时候对组件进行操作；

3.生命周期

1.Angular生命周期(8个)：

• ngOnChanges:组件绑定属性、
• ngOnInit：组件初始化前、
• ngDoCheck：手动检测组件属性、
• ngAfterContentInit：组件变更数据进行投影、
• ngAftercontentCheked每次投影变更后调用、
• ngAfterViewInit：初始化组件、子视图、
• ngAfterViewChecked：检查完子视图、
• ngOnDestroy：组件销毁前

2.React 生命周期(8个)：

• compoentWillMount：组件挂载前
• render:组件渲染
• componentDidMount：组件渲染后
• componentWillRecieveProps：组件更新接受数据
• shouldComponentUpdate：组件更新数据
• componentWillUpdate：组件更新前
• componentDidUpdate：组件更新后
• componentWillUnmount：组件销毁前

3.Vue组件生命周期(8个)：vue2.0引入生命周期

• beforeCreate:组件创建前
• created:组件创建后
• beforeMount:组件载入前
• mounted:组件载入后
• beforeUpdated：组件更新前
• updated:组件更新后
• beforeDestroy：组件销毁前
• destroyed：组件销毁后