第十三节——生命周期

一、概念

世间万物都有自己生命周期，vue也有这一特点，vue的生命周期可以简单分为四个阶段：创建阶段，挂载阶段，更新阶段，销毁阶段。

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

一、创建阶段

1、beforeCreate

在组件实例创建之前调用，此时组件的数据观测、事件监听和模板编译尚未开始，因此无法访问到组件的响应式数据、计算属性、方法等

2、created

在组件实例创建之后调用，此时组件的数据观测、事件监听和模板编译已经完成，可以访问到组件的响应式数据、计算属性、方法等，但是还没有挂载到 DOM 上，因此无法访问到组件的元素或子组件。常用于发送网络请求

二、挂载阶段

1、beforeMount

在组件挂载到 DOM 之前调用，此时组件的虚拟 DOM 已经创建，但是还没有插入到父容器中，可以对虚拟 DOM 进行一些操作或修改

2、mounted

在组件挂载到 DOM 之后调用，此时组件的虚拟 DOM 已经插入到父容器中，并且生成了真实的 DOM 节点，可以访问到组件的元素或子组件，并且可以执行一些需要 DOM 的操作。

三、更新阶段

1、beforeUpdate

在组件更新之前调用，此时组件的数据已经发生变化，但是还没有更新到 DOM 上，可以在这个钩子中获取更新前的状态，并进行一些比较或逻辑处理。

2、updated

在组件更新之后调用，此时组件的数据已经更新到 DOM 上，并且完成了重新渲染，可以在这个钩子中获取更新后的状态，并进行一些后续操作或效果处理。不能在这个生命周期里做响应式操作，否则会死循环

四、卸载阶段

1、beforeUnmount

在组件卸载之前调用，此时组件还处于可用状态，可以在这个钩子中执行一些清理操作，如移除事件监听器、取消网络请求、停止定时器等。

2、unmounted

在组件卸载之后调用，此时组件已经从 DOM 中移除，并且停止了所有的响应式效果和事件监听，无法再访问到组件的任何属性或方法。

十、forceUpdate

1、概念

迫使Vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

2、基本使用

把当在data里没有显示的声明一个对象的属性，而是之后给该对象添加属性，这种情况vue是检测不到数据变化的，可以使用$forceUpdate()

3、注意

官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题。