前端VUE：组件的生命周期

组件的生命周期指的是：组件从创建 -> 运行（渲染） -> 销毁的整个过程，强调的是一个时间段

监听组件的不同时刻： vue 框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用

如：

• 当组件在内存中被创建完毕之后，会自动调用 created 函数
• 当组件被成功的渲染到页面上之后，会自动调用 mounted 函数
• 当组件被销毁完毕之后，会自动调用 unmounted 函数

监听组件的更新： 当组件的 data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，从而保证 View 视图展示的数据和 Model 数据源保持一致

当组件被重新渲染完毕之后，会自动调用 updated 生命周期函数

主要的生命周期函数：

1. created 函数：组件在内存中创建完成后，属于创建阶段，只被执行 1 次，主要用于发起ajax请求初始数据
2. mounted 函数：组件初次在页面中渲染完毕后，属于创建阶段，只执行 1 次，主要用于操作DOM元素
3. updated 函数：组件在页面中被重新渲染完毕后，属于运行阶段，可执行 0 次或 多次
4. unmounted 函数：组件被销毁后（指页面和内存），属于销毁阶段，只执行 1 次

• 在实际开发中，created 是最常用的生命周期函数

组件中全部的生命周期函数：

注意：activated 和 deactivated两个属于keep-live中的钩子函数，不是 八大 生命周期函数

完整的生命周期图示：