每个 Vue 组件实例被创建后都会经过一系列初始化步骤，比如，它需要数据观测，模板编译，挂载实例到 dom 上，以及数据变化时更新 dom；这个过程中会运行叫做生命周期钩子的函数，以便用户在特定阶段有机会添加他们自己的代码；
Vue 生命周期总共可以分为 8 个阶段：创建前后、载入前后、更新前后、销毁前后，以及一些特殊场景的生命周期，vue3 中新增了三个用于调试和服务端渲染场景；
生命周期流程图
vue 生命周期对比
| 生命周期 v2 | 生命周期 v3 | 描述 |
|---|---|---|
| beforeCreate | beforeCreate | 组件实例被创建之初 （通常用于插件开发中执行一些初始化任务） |
| created | created | 组件实例已经完全创建 （组件初始化完毕，可以访问各种数据，获取接口数据等） |
| beforeMount | beforeMount | 组件挂载之前 |
| mounted | mounted | 组件挂载到实例上去之后 （dom 已创建，可用于获取访问数据和 dom 元素、访问子组件等） |
| beforeUpdate | beforeUpdate | 组件数据发生变化，更新之前 （此时 view 层还未更新，可用于获取更新前各种状态） |
| updated | updated | 数据数据更新之后 （完成 view 层的更新，更新后，所有状态已是最新） |
| beforeDestroy | beforeUnmounted | 组件实例销毁之前 （实例被销毁前调用，可用于一些定时器或订阅的取消） |
| destroyed | unmounted | 组件实例销毁之后 （销毁实例，可清理它与其它实例的连接，解绑全部指令及事件监听器） |
| activated | activated | keep-alive 缓存的组件激活时 |
| deactivated | deactivated | keep-alive 缓存的组件停用时调用 |
| errorCaptured | errorCaptured | 捕获一个来自子孙组件的错误时被调用 |
| - | renderTracked | 调试钩子，响应式依赖被收集时调用 |
| - | renderTriggered | 调试钩子，响应式依赖被触发时调用 |
| - | serverPrefetch | ssr only，组件实例在服务器上被渲染前调用 |
vue2 的部分源码
// Vue2 部分源码
initLifecycle(vm)
initEvents(vm)
initRender(vm)
// 在 beforeCreate 之前，没有初始化与实例内 data、methods 等相关的
callHook(vm, 'beforeCreate', undefined, false /* setContext */)
initInjections(vm) // 初始化父组件或顶级组件传进来的 data/props
initState(vm) // 初始化自己的 data/props
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
面试题
说一下生命周期的方法都有哪些？一般在哪一步发送请求（在哪发请求都可以，主要看场景）？
-
beforeCreate 在实例初始化之后，数据观测 （data observer） 和 event/watcher 事件配置之前被调用；
-
created 实例已经在创建完成之后被调用，在这一步实例已完成以下的配置：
- 属性观测；
- 属性和方法的运算；
- watch/event 事件回调，这时候没有挂载 $el；
-
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用；
-
mounted el 被创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子；
-
beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前；
-
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子；
-
beforeDestory 实例销毁之前调用，在这一步，实例仍然完全可用；
-
destoryed Vue 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用；
-
keep-alive （activated 和 deactivated）；
Vue 实例挂载的过程中发生了什么?
-
挂载过程指的是 app.mount() 过程，这是个初始化过程，整体上做了两件事：初始化和建立更新机制；
-
初始化会创建组件实例、初始化组件状态、创建各种响应式数据；
-
建立更新机制这一步会立即执行一次组件更新函数，这会首次执行组件渲染函数并执行 patch 将前面获得 vnode 转换为 dom；同时首次执行渲染函数会创建它内部响应式数据和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数；
vue-loader 是什么？它有什么作用？
-
vue-loader 是用于处理单文件组件 （SFC，Single-File Component） 的 webpack loader；
-
因为有了 vue-loader，就可以在项目中编写 SFC 格式的 Vue 组件，可以把代码分割为 <template>、<script> 和 <style>，代码会异常清晰，结合其他 loader 还可以用 Pug 编写，用 SASS 编写 <style>，用 TS 编写 <script>，<style> 还可以单独作用当前组件；
-
webpack 打包时，会以 loader 的方式调用 vue-loader；
-
vue-loader 被执行时，它会对 SFC 中的每个语言块用单独的 loader 链处理，最后将这些单独的块装配成最终的组件模块；
vue2.x✍️ 基本使用
上一篇
