Vue和Angular生命周期总结——精简

一、Vue 生命周期

1、beforeCreate：

• 在实例初始化之前被调用。

• 此时数据观测和事件配置尚未开始，无法访问data、computed和methods等属性。

• 这个阶段可以进行一些初始化操作，但由于无法访问实例的数据和方法，所以操作比较有限。例如，可以在这个阶段设置一些全局的配置或者进行一些预加载操作。

2、created：

• 实例创建完成后被调用。

• 此时可以访问data、computed和methods等属性，但 DOM 尚未渲染。

• 在这个阶段，可以进行一些数据的初始化、异步请求等操作。因为此时已经可以访问实例的数据和方法，所以可以根据需要进行一些复杂的逻辑处理。例如，可以在这个阶段发送异步请求获取数据，并将数据存储在实例的数据属性中，以便在模板中进行渲染。

3、beforeMount：

• 在挂载开始之前被调用。

• 此时模板已经编译完成，但尚未渲染到 DOM 中。

• 可以在这个阶段获取到编译后的模板内容，但还无法访问到真实的 DOM 元素。可以进行一些与 DOM 相关的准备工作，如设置一些初始状态或者添加一些事件监听器。例如，可以在这个阶段为即将渲染的 DOM 元素设置一些初始样式或者添加一些交互效果的准备工作。

4、mounted：

• 挂载完成后被调用。

• 此时 DOM 已经渲染完成，可以进行 DOM 操作。

• 这是一个非常常用的生命周期钩子，因为在这个阶段可以确保 DOM 元素已经存在，可以进行各种 DOM 操作，如获取元素的尺寸、位置，添加事件监听器等。例如，可以在这个阶段通过document.getElementById()等方法获取 DOM 元素并进行操作，或者使用第三方库对 DOM 元素进行动画效果的添加。

5、beforeUpdate：

• 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

• 在这个阶段，可以获取到更新前的状态，可以进行一些比较操作或者保存一些临时状态，以便在更新后进行恢复。例如，可以在这个阶段记录一些数据的当前值，以便在更新后进行比较或者恢复操作。

6、updated：

• 数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。

• 在这个阶段，可以获取到更新后的状态，可以进行一些后续的处理操作，如更新一些依赖于数据变化的状态或者进行一些性能优化。例如，可以在这个阶段检查一些数据的变化是否符合预期，并进行相应的处理。

7、activated（组件缓存相关）：

• 被 keep-alive 包裹的组件在激活时调用。

• 当组件在路由切换等情况下被缓存后再次显示时，会触发这个钩子。可以在这个阶段进行一些数据的重新加载或者状态的恢复操作。例如，如果组件在缓存期间有一些数据可能发生了变化，可以在这个阶段重新获取最新的数据并更新组件的状态。

8、deactivated（组件缓存相关）：

• 被 keep-alive 包裹的组件在停用时调用。

• 当组件在路由切换等情况下被缓存时，会触发这个钩子。可以在这个阶段进行一些资源的释放或者状态的保存操作。例如，可以在这个阶段取消一些定时器或者保存当前组件的状态，以便在下次激活时恢复。

9、beforeDestroy：

• 实例销毁之前被调用。

• 在这个阶段，可以进行一些清理操作，如取消定时器、解绑事件、清除全局变量等，以避免内存泄漏。例如，可以在这个阶段取消之前设置的定时器，或者解绑一些全局的事件监听器。

10、destroyed：

• 实例销毁后被调用。

• 此时所有的事件监听器、子组件和指令都已经被销毁。

• 在这个阶段，可以进行一些最终的清理操作，如释放一些资源或者进行一些日志记录。例如，可以在这个阶段记录一些销毁的日志信息，以便进行调试和分析。

二、Angular 生命周期

1、ngOnChanges：

• 当输入属性的值发生变化时被调用。

• 可以在这个钩子中检测输入属性的变化，并根据变化进行相应的处理。例如，如果组件接收一个输入属性用于显示数据，可以在这个钩子中检测输入属性的变化，并更新组件的内部状态以显示最新的数据。

2、ngOnInit：

• 在第一次ngOnChanges之后调用，用于初始化组件。

• 这是一个常用的生命周期钩子，通常用于进行一些初始化操作，如数据初始化、订阅事件、初始化服务等。例如，可以在这个阶段发送异步请求获取数据，并将数据存储在组件的属性中，以便在模板中进行显示。

3、ngDoCheck：

• 在每个变更检测周期中调用，用于自定义变化检测。

• 如果需要进行自定义的变化检测，可以在这个钩子中实现。例如，如果组件的状态变化比较复杂，需要手动检测某些属性的变化，可以在这个钩子中进行检测并触发相应的更新操作。

4、ngAfterContentInit：

• 在组件内容初始化之后调用。

• 当组件的内容（通过ng-content引入的内容）初始化完成后，会触发这个钩子。可以在这个阶段对引入的内容进行一些操作，如获取子元素、设置事件监听器等。

5、ngAfterContentChecked：

• 在组件内容每次检查之后调用。

• 在每个变更检测周期中，当组件的内容被检查后，会触发这个钩子。可以在这个阶段对内容的变化进行响应，或者进行一些额外的检查和处理。

6、ngAfterViewInit：

• 在组件视图初始化之后调用。

• 此时可以访问到组件的 DOM 元素。

• 这是一个常用的生命周期钩子，通常用于进行一些 DOM 操作，如获取元素的尺寸、位置，添加事件监听器等。例如，可以在这个阶段通过ViewChild装饰器获取子组件的实例，并进行一些操作。

7、ngAfterViewChecked：

• 在组件视图每次检查之后调用。

• 在每个变更检测周期中，当组件的视图被检查后，会触发这个钩子。可以在这个阶段对视图的变化进行响应，或者进行一些额外的检查和处理。

8、ngOnDestroy：

• 在组件销毁之前调用。

• 用于清理资源，取消订阅等操作。

• 在这个阶段，应该清理所有的资源，如取消定时器、取消订阅事件、释放内存等，以避免内存泄漏和资源浪费。