关于生命周期

关于生命周期

生命周期有哪些？发送请求在 created 还是 mounted ？

Vue2.x 系统自带有 8 个生命周期：

beforeCreate
created
// 目前还没有 dom
beforeMount
mounted
befroreUpdate
updated
beforeDestroy
destroyed

发请求可以在 mounted 周期中，也可以在 created 周期中。
这个需要根据项目和业务的具体情况来选择。

组件的加载顺序是：
因为父组件引入了子组件，那么执行的顺序将是由父组件先执行前三个生命周期，而后按照先后顺序，每个子组件都将执行完前四个生命周期，子组件全部挂载完毕后，父组件执行第四个生命周期，挂载 dom。
如果业务是父组件引入子组件，需要优先加载子组件的数据，那么在父组件中，请求需要放在 mounted 中。
如果当前组件没有依赖关系，那么放在 mounted 和 beforeCreate 中都可以。

发请求为什么在 mounted 而不在 beforeCreate？beforeCreate 和 created 有什么区别？

为什么不在 beforeCreate 中发请求？

如果请求是在 methods 中封装好的，在 beforeCreate 中调用。
则在 beforeCreate 阶段无法获取到 methods 中的方法，并且会报错。

但是如果请求不是封装在 methods 中，而是直接进入页面进而执行的，那么是可以顺利发起请求的。

beforeCreate 和 created 有什么区别？

beforeCreate 没有$data，拿不到$el。
created 中有$data，可以拿到$el。

在 created 中如何获取 dom ？

通过使用异步操作，使得获取 dom 是在异步操作中进行的。
比如：setTimeout、请求、Promise.xxx() 等等。

Vue 内置的 this.$nextTick()、ref 等等。

一旦进入组件，会执行哪些生命周期？

beforeCreate
created
beforeMount
mounted

第二次或者第 N 次进入组件，会执行哪些生命周期？

如果当前组件加入了 keep-alive，只会执行一个生命周期：
activated

如果没有加入 keep-alive，会执行前四个生命周期：
beforeCreate created beforeMount mounted

如果父组件引入了子组件，生命周期的顺序是什么？

beforeCreate // 父
created // 父
beforeMount // 父beforeCreate // 子
created // 子
beforeMount // 子
mounted // 子mounted // 父

先准备父组件，对数据进行一些处理或者向子组件传递，让子组件可以接收到，而后准备子组件并挂载子组件，子组件挂载完毕后，父组件挂载。

1. 父：beforeCreate,created,beforeMount
2. 子 1：beforeCreate,created,beforeMount,mounted
   子 2：beforeCreate,created,beforeMount,mounted
   …
3. 父：mounted

加入 keep-alive 会执行哪些生命周期？

activated 和 deactivated 两个生命周期。

如果使用了 keep-alive，系统会添加两个生命周期（activated 和 deactivated），一共是 10 个生命周期。
第一次进入组件会执行 5 个生命周期（前四个和 activated）。

你在什么情况下使用过生命周期？描述一下生命周期的使用场景

created     ====>   单组件请求。
mounted     ====>   同步代码可以获取 dom，如果子组件需要先于父组件发请求，也在 mounted 中处理。
activated   ====>   缓存组件，判断 id 是否相等，如果相等则不需要再次发起请求，如果不相等则发请求。
destroyed   ====>   关闭页面记录视频播放的事件，初始化的时候从上一次的历史开始播放。

关于生命周期的总结

生命周期一共有 8 个：
beforeCreate、created、beforeMount、mounted、befroreUpdate、updated、beforeDestroy、destroyed。
这是系统自带的。
还有两个由 keep-alive 添加的：
activated、deactivated。

组件挂载的时候会执行
beforeCreate、created、beforeMount、mounted
4 个生命周期，但是如果加入了 keep-alive，将会多执行一个
activated，这种组件在重复进入时只会执行
activated一个周期。

父组件将在全部子组件挂载完毕后执行
mounted周期。