Vue 生命周期可以分为四个阶段:
- 创建阶段
- 挂载阶段
- 更新阶段
- 销毁阶段
1. 创建阶段
在创建阶段,Vue 实例会完成以下任务:
- 初始化数据:Vue 实例会根据
data
属性初始化组件的数据; - 加载注入:Vue 实例会将指令、计算属性、方法、依赖注入等加载进来;
- 初始化事件:Vue 实例会初始化事件,包括组件自定义事件、原生 DOM 事件、父组件事件等。
在创建阶段,Vue 实例会经历以下生命周期钩子函数:
beforeCreate
:实例刚被创建,但data
和methods
属性还未被初始化,无法访问这些属性;created
:data
和methods
属性已经初始化完成,可以访问这些属性,但是还没有挂载到 DOM 树上,无法访问 DOM 元素;
2. 挂载阶段
在挂载阶段,Vue 实例会完成以下任务:
- 编译模板:Vue 实例会将模板编译成渲染函数;
- 挂载实例:Vue 实例会将渲染函数返回的虚拟 DOM 渲染成真实 DOM,并插入到页面中;
- 更新 DOM:Vue 实例会根据数据的变化,重新渲染组件,更新 DOM。
在挂载阶段,Vue 实例会经历以下生命周期钩子函数:
beforeMount
:组件已经编译完成,但还未挂载到页面上;mounted
:组件已经挂载到页面上,可以访问 DOM 元素。
3. 更新阶段
在更新阶段,Vue 实例会完成以下任务:
- 数据响应式:Vue 实例会检测组件数据的变化,并进行相应的重新渲染;
- 更新虚拟 DOM:Vue 实例会根据数据的变化,生成新的虚拟 DOM;
- 对比虚拟 DOM:Vue 实例会将新的虚拟 DOM 与旧虚拟 DOM 进行对比,找出需要更新的部分;
- 更新 DOM:Vue 实例会将需要更新的部分渲染成真实 DOM,并更新到页面上。
在更新阶段,Vue 实例会经历以下生命周期钩子函数:
beforeUpdate
:组件已经重新渲染,但还未将新的内容渲染到页面上;updated
:组件已经重新渲染,并将新的内容渲染到页面上。
4. 销毁阶段
在销毁阶段,Vue 实例会完成以下任务:
- 销毁实例:Vue 实例会从页面上移除,并销毁实例对象;
- 清理事件和定时器:Vue 实例会清理所有的事件监听器、计时器等。
在销毁阶段,Vue 实例会经历以下生命周期钩子函数:
beforeDestroy
:组件即将被销毁,但是还可以访问组件实例及其数据;destroyed
:组件已经被销毁,无法再访问组件实例及其数据。