浅谈Vue2生命周期

定义

生命周期：出生到死亡，即一个实例的开始到结束，即一个生命周期，这里主要讲一个vue组件实例的一个生命周期。

$data：数据，即我们在组件中data或computed中定义的数据

$el:元素，即像<p><div>这种

作用

开发者有机会在特定阶段运行自己的代码（源自vue2）

具体介绍（分为8+2个）

beforeCreate

1. 无$data，无$el

2. 在组件实例初始化完成之后立即调用。会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。

Create

1. 有$data，无$el

2. 在组件实例处理完所有与状态相关的选项后调用，当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

beforeMount

1. 有$data，无$el，在组件被挂载之前调用。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

2. 这个钩子在服务端渲染时不会被调用。

Mount

1. 有$data，有$el

2. 在组件被挂载之后调用。

3. 组件在以下情况下被视为已挂载：

   1. 所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)

   2. 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

4. 这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。

5. 这个钩子在服务端渲染时不会被调用。

beforeUpdate

1. 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

2. 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

3. 这个钩子在服务端渲染时不会被调用。

Update

1. 调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。

2. 但是，在大多数情况下，应该避免在此期间更改状态，避免一直更新。

beforeDestroy

1. 实例销毁之前调用

2. 在这个阶段一般进行关闭定时器，取消订阅消息，解绑自定义事件。

Destroyed

1. 实例销毁后调

2. 调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

3. 该钩子在服务端渲染期间不被调用。

图示

beforeCreate~mounted

（待补充···）

keep-alive，activated，deactivated

关于keep-alive组件多出来的两个生命周期，activated，deactivated

1. activated是进入，deactivated是销毁

2. 加入了keep-alive，第一次进入组件会执行哪些生命周期：前四个＋activated

3. 继承上面那道题，第二次或者第n次进入组件会执行哪些生命周期：只执行一个生命周期，activated