angular生命周期:
指令和组件的实例有一个生命周期,当angular新建/更新/销毁它们时触发,通过实现一个或多个angular core库里的生命周期钩子接口,开发者可以介入该生命周期中的关键时刻。
每个接口都有唯一的一个钩子方法,名字是ng接口名
ngOnChanges 设置数据绑定输入属性时响应
ngOnInit 第一次现实数据绑定和设置指令之后,初始化指令/组件
ngDoCheck 检测 并在发生angular无法或没有自己检测的变化时作出反应
ngAfterContentInit 把外部内容投影进组件/指令的视图之后调用
ngAfterContentChecked angular完成被投影组件内容的变更检测之后调用
ngAfterViewInit 初始化完组件视图及其子视图后调用
ngAfterViewChecked angular做完组件视图和子视图的变更检测之后调用
ngOnDestroy 每次销毁指令/组件之前调用并清扫,在这反订阅可观察对象和分离时间处理器,防止内存泄漏。angular销毁指令/组件之前调用。
react生命周期:
当组件第一次被渲染到DOM中时,称为挂载 mount
当组件被删除时,称为卸载 unmount
为class组件生命一些特殊方法,当组件挂载或卸载时就会去执行这些方法
常用的生命周期有:
constructor 调用构造函数
render 检查this.props和this.state的变化并返回React元素/数组/fragments/Portals/字符串或数值类型/布尔类型/null
componentDidMount 组件挂载后立即调用,如需网络请求获取数据,可以此时实例化请求。可以添加订阅
componentDidUpdate 更新后立即调用,首次渲染不执行,也可以此时进行网络请求。此时调用setState必须包裹在一个条件语句里,否则会死循环
componentWillUnmount 组件卸载或销毁之前调用
vue生命周期:
vue实例在创建时要经过 设置数据监听/编译模版/将实例挂载到DOM并在数据变化时更新DOM等,同时在这个过程中会运行生命周期钩子的函数,时用户在不同阶段添加自己的代码
new Vue()声明->初始化(events&lifecycle)->beforeCreate -> 初始化(injections&reactivity)->created->compile->beforeMount->mounted->updated->beforeDestory->destroyed