Vue生命周期

Vue 生命周期可以分为四个阶段：

1. 创建阶段
2. 挂载阶段
3. 更新阶段
4. 销毁阶段

1. 创建阶段

在创建阶段，Vue 实例会完成以下任务：

1. 初始化数据：Vue 实例会根据 data 属性初始化组件的数据；
2. 加载注入：Vue 实例会将指令、计算属性、方法、依赖注入等加载进来；
3. 初始化事件：Vue 实例会初始化事件，包括组件自定义事件、原生 DOM 事件、父组件事件等。

在创建阶段，Vue 实例会经历以下生命周期钩子函数：

• beforeCreate：实例刚被创建，但 data 和 methods 属性还未被初始化，无法访问这些属性；
• created：data 和 methods 属性已经初始化完成，可以访问这些属性，但是还没有挂载到 DOM 树上，无法访问 DOM 元素；

2. 挂载阶段

在挂载阶段，Vue 实例会完成以下任务：

1. 编译模板：Vue 实例会将模板编译成渲染函数；
2. 挂载实例：Vue 实例会将渲染函数返回的虚拟 DOM 渲染成真实 DOM，并插入到页面中；
3. 更新 DOM：Vue 实例会根据数据的变化，重新渲染组件，更新 DOM。

在挂载阶段，Vue 实例会经历以下生命周期钩子函数：

• beforeMount：组件已经编译完成，但还未挂载到页面上；
• mounted：组件已经挂载到页面上，可以访问 DOM 元素。

3. 更新阶段

在更新阶段，Vue 实例会完成以下任务：

1. 数据响应式：Vue 实例会检测组件数据的变化，并进行相应的重新渲染；
2. 更新虚拟 DOM：Vue 实例会根据数据的变化，生成新的虚拟 DOM；
3. 对比虚拟 DOM：Vue 实例会将新的虚拟 DOM 与旧虚拟 DOM 进行对比，找出需要更新的部分；
4. 更新 DOM：Vue 实例会将需要更新的部分渲染成真实 DOM，并更新到页面上。

在更新阶段，Vue 实例会经历以下生命周期钩子函数：

• beforeUpdate：组件已经重新渲染，但还未将新的内容渲染到页面上；
• updated：组件已经重新渲染，并将新的内容渲染到页面上。

4. 销毁阶段

在销毁阶段，Vue 实例会完成以下任务：

1. 销毁实例：Vue 实例会从页面上移除，并销毁实例对象；
2. 清理事件和定时器：Vue 实例会清理所有的事件监听器、计时器等。

在销毁阶段，Vue 实例会经历以下生命周期钩子函数：

• beforeDestroy：组件即将被销毁，但是还可以访问组件实例及其数据；
• destroyed：组件已经被销毁，无法再访问组件实例及其数据。