对于Vue的生命周期理解

Vue总共有几个生命周期？

说到生命周期就需要判断是否添加<keep-alive>标签了，如果不添加的情况下，那就是八个生命周期,即：

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestory
8. detoryed

那如果加上了<keep-alive>标签的话，会多出来两个生命周期，分别是actived和deactived。

生命周期钩子的调用顺序究竟是什么？

说到调用顺序，自然离不开$el和$data。

$el指的是vue最外层的根标签节点，而$data指的是Vue的数据属性。

那么调用顺序为：

1. beforeCreate
2. create(生成$data)
3. beforeMount
4. mounted(生成$el)

keep-alive标签的作用究竟是什么？

直译就是保持活力，说白了就是缓存，添加了它之后，会多出来两个生命周期，那么有什么用？举个例子我们就一目了然了。

没有使用keep-alive标签时

当我们进入到A组件时，会调用以下生命周期：

1. beforeCreate
2. created
3. beforeMount
4. mounted

当我们离开A组件进入到B组件的时候：

1. beforeDestory
2. destoryed

当我们进入到B组件时：

1. beforeCreate
2. created
3. beforeMount
4. mounted

如果离开B组件则会先销毁B组件，再创建A，跟上面一样：

A:

1. beforeDestory
2. destoryed

B:

1. beforeCreate
2. created
3. beforeMount
4. mounted

如果使用了keep-alive标签时：

1. 首次访问组件 A：

   • beforeCreate、created、beforeMount、mounted

2. 从 A 导航到 B：

   • 组件 A: deactivated
   • 组件 B: beforeCreate、created、beforeMount、mounted

3. 从 B 返回 A：

   • 组件 B: deactivated
   • 组件 A: activated

4. 再次从 A 导航到 B：

   • 组件 A: deactivated
   • 组件 B: activated