目录
6、如果加入了 keep-alive，第一次进入组件会执行哪些生命周期？
7、如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
一、什么是Vue生命周期？
Vue是组件化编程，从一个组件诞生到销毁会经历很多过程，这些过程就是生命周期。
从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
二、Vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
三、Vue2.x生命周期
1、总共有几个阶段？
系统自带的总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。
① beforeCreate（组件实例被创建前）
data 和 methods 中的数据还未初始化，所以此时不能使用 data 中的数据和 methods 中的方法。
也就是说数据观测（Data Observer）和初始化事件还未开始，此时 data 的响应式追踪、event / watcher 都还没有被设置，也就是说不能访问到 data、methods、computed 上的方法和数据。
一般用于在开发第三方插件中使用，如 Vuex 和 Vue-router。初始化父子关系及事件，常见操作是共享属性和方法，也就是进行mixin操作来扩展组件。
② created（组件实例被创建后）
data 和 methods 初始化完毕，此时可以使用 methods 中的方法和 data 中的数据。
组件实例已经创建完成，实例已完成数据观测（Data Observer）、属性与方法的运算等；实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，所以能获得 $data属性，但是此时渲染的节点还未挂载到 DOM，所以不能访问到 $el 属性
服务端渲染经常使用。
③ beforeMount（组件挂载之前）
在组件挂载开始之前被调用，相关的 render 函数首次被调用。
template 模板已在内存中编译好了，但未挂载到页面中。
实例已完成以下的配置：编译模板，把 data 里面的数据和模板生成 html，此时还没有挂载 html 到页面上。
④ mounted（组件挂载到实例上去之后）
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。将内存中编译好的模板挂载到页面上。
若要对页面中的DOM进行操作，最早在mounted中。执行完mounted，就表示整个Vue实例已经初始化完毕，此时脱离创建阶段，进入运行阶段。此过程中进行 ajax交互；可用于获取DOM元素。
实例已完成以下的配置：用上面编译好的 html 内容替换 el 属性指向的DOM对象，完成模板中的 html 渲染到 html 页面中。
⑤ beforeUpdate（组件数据发生变化，更新之前）
在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
⑥ updated（组件数据更新之后）
在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
调用时，组件DOM已经根据响应式数据的变化更新了，所以可以执行依赖于DOM的操作。
然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeUpdate 和 updated 这两个事件，会根据data数据的改变，选择性的触发0次到多次；
⑦ beforeDestroy（组件实例销毁之前）
在Vue实例销毁之前调用。实例仍然完全可用，this 仍能获取到实例。
⑧ destroyed（组件实例销毁之后）
在Vue实例销毁之后调用。Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
2、第一次进入页面/组件，会触发哪几个钩子？
会触发下面这几个钩子：beforeCreate、created、beforeMount、mounted
3、在哪个阶段有$el，哪个阶段有$data？
beforeCreate：啥都没有
created：有$data，没有$el
beforeMount：有$data，没有$el
mounted：都有
4、DOM 渲染在哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。
5、如果加入了 keep-alive，会多什么生命周期？
会额外增加2个生命周期，分别是 activated 和 deactivated，表示 keep-alive 缓存的组件激活时和keep-alive 缓存的组件停用时调用
用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数。
6、如果加入了 keep-alive，第一次进入组件会执行哪些生命周期？
执行5个生命周期：beforeCreate、created、beforeMount、mounted、activated
7、如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
只执行一个声明周期：activated
8、捕获一个来自子孙组件的错误时触发什么生命周期？
errorCaptured
9、整体流程图
具体分析：
beforeCreate -> created
- 初始化
vue实例，进行数据观测
created
- 完成数据观测，属性与方法的运算，
watch、event事件回调的配置- 可调用
methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算- 此时
vm.$el并没有被创建
created -> beforeMount
- 判断是否存在
el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译- 优先级：
render>template>outerHTMLvm.el获取到的是挂载DOM的
beforeMount
- 在此阶段可获取到
vm.el- 此阶段
vm.el虽已完成DOM初始化，但并未挂载在el选项上
beforeMount -> mounted
- 此阶段
vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM
mounted
vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM
beforeUpdate
- 更新的数据必须是被渲染在模板上的（
el、template、render之一）- 此时
view层还未更新- 若在
beforeUpdate中再次修改数据，不会再次触发更新方法
updated
- 完成
view层的更新- 若在
updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）
beforeDestroy
- 实例被销毁前调用，此时实例属性与方法仍可访问
destroyed
完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
并不能清除DOM，仅仅销毁实例
使用场景分析
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 组件实例还未创建，通常用于插件开发中执行一些初始化任务 |
| created | 组件初始化完毕，各种数据可以使用，常用于异步数据获取 |
| beforeMount | 未执行渲染、更新，DOM未创建 |
| mounted | 初始化结束，DOM已创建，可用于获取访问数据和DOM元素 |
| beforeUpdate | 更新前，可用于获取更新前各种状态 |
| updated | 更新后，所有状态已是最新 |
| beforeDestroy | 销毁前，可用于一些定时器或订阅的取消 |
| destroyed | 组件已销毁，作用同上 |
10、数据请求在 created 和 mouted 的区别
两者相同点：
都能拿到实例对象的属性和方法。
两者的区别：
created 是在组件实例一旦创建完成的时候立刻调用，这时候页面 DOM 节点并未生成；
mounted 是在页面 DOM 节点渲染完毕之后就立刻执行的；
触发时机上 created 是比 mounted 要更早的；
讨论这个问题本质就是触发的时机：
放在 mounted 请求有可能导致页面闪动（页面 DOM 结构已经生成），但如果在页面加载前完成则不会出现此情况。所以一般建议放在created 生命周期当中。
11、 一般在哪个生命周期请求异步数据
我们可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端返回的数据进行赋值。 比较推荐在 created 钩子函数中调用异步请求。
因为在 created 钩子函数中调用异步请求有以下优点：
① 在触发时机上，created 是比其它两个生命周期更早，所以能更快获取到服务端数据，减少页面加载时间，用户体验更好；
② SSR 服务端渲染不支持 beforeMount 、mounted 这两个钩子函数，放在 created 中有助于一致性。
四、Vue3.x生命周期
1、Vue3.x生命周期详解
① setup()
Composition API 的入口，是最优执行的。
开始创建组件之前，在
beforeCreate和created之前执行。创建的是data和method因为
setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在setup函数中编写。
② onBeforeMount()
组件挂载到节点上之前执行的函数。
③ onMounted()
组件挂载完成后执行的函数。
④ onBeforeUpdate()
组件更新之前执行的函数。
⑤ onUpdated()
组件更新完成之后执行的函数。
⑥ onBeforeUnmount()
组件卸载之前执行的函数。
⑦ onUnmounted()
组件卸载完成后执行的函数
⑧ onActivated()
被包含在
<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
⑨ onDeactivated()
比如从 A 组件，切换到 B 组件，A 组件消失时执行。
⑩ onErrorCaptured():
当捕获一个来自子孙组件的异常时激活钩子函数。
2、钩子函数具体使用
这些函数接受一个回调函数，当钩子被组件调用时将会被执行：
export default {
setup() {
// mounted
onMounted(() => {
console.log('Component is mounted!')
})
}
}实际例子如下：
Vue3.x 生命周期在调用前需要先进行引入
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted } from 'vue'
export default {
components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
props: {
user: {
type: String,
required: true
}
},
setup (props) {
const repositories = ref([])
const getUserRepositories = async () => {
repositories.value = await fetchUserRepositories(props.user)
}
onMounted(getUserRepositories) // on `mounted` call `getUserRepositories`
return {
repositories,
getUserRepositories
}
},可以在setup()函数之后编写 Vue2的生命周期函数。
Vue2.x的生命周期和Vue3.x的生命周期，都可用，但是不要混用。
beforeCreate() {
console.log("1-组件创建之前-----beforeCreate()");
},
beforeMount() {
console.log("2-组件挂载到页面之前执行-----BeforeMount()");
},
mounted() {
console.log("3-组件挂载到页面之后执行-----Mounted()");
},
beforeUpdate() {
console.log("4-组件更新之前-----BeforeUpdate()");
},
updated() {
console.log("5-组件更新之后-----Updated()");
},五、Vue2.x 和 Vue3.x 生命周期对比
Vue2.x 和 Vue3.x 生命周期对比：
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured通过这样对比，可以很容易的看出 Vue3 的钩子函数基本是在 Vue2 的基础上加了一个on，但也有两个钩子函数发生了变化。
BeforeDestroy变成了onBeforeUnmountdestroyed变成了onUnmounted
除了这些钩子函数外，Vue3.x还增加了onRenderTracked和onRenderTriggered函数
1555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
