前端面试必备 | Vue生命周期篇(P1-20)
文章目录
- Vue 2和Vue 3的生命周期钩子有哪些区别？
- Vue 2的生命周期钩子函数有哪些？它们的执行顺序是怎样的？
- Vue 3引入了哪些新的生命周期钩子函数？
- Vue的生命周期钩子可以在组件之间进行传递吗？
- Vue 3中删除了哪些过时的生命周期钩子函数？
- 请解释Vue生命周期中的"beforeCreate"和"created"钩子函数的作用。
- 什么是Vue实例的"mounted"生命周期钩子？它在什么时候被调用？
- 请解释Vue生命周期中的"beforeUpdate"和"updated"钩子函数的用途。
- Vue的生命周期中的"activated"和"deactivated"钩子函数用于什么？
- 请解释Vue实例的"beforeDestroy"和"destroyed"生命周期钩子函数的作用。
- 如何在Vue 2中阻止组件销毁？
- Vue 3中的"errorCaptured"生命周期钩子函数的作用是什么？
- 如何在Vue中监听窗口大小变化的事件？
- 请解释Vue 2中的keep-alive组件的作用及其相关生命周期钩子函数。
- 在Vue中，当一个组件被复用时，会发生哪些生命周期事件？
- 如何在Vue 3中进行异步操作？
- 什么是Vue的服务器端渲染（SSR）？它与生命周期有何关系？
- Vue中的transition组件和动画效果是如何结合使用的？相关的生命周期钩子是什么？
- 什么是Vue的"nextTick"方法？它在生命周期中的哪个阶段调用比较合适？
- 对Vue生命周期的理解
1. Vue 2和Vue 3的生命周期钩子有哪些区别？
Vue 2和Vue 3的生命周期钩子在命名上有一些区别，而且Vue 3进行了一些更改和优化。
以下是Vue 2和Vue 3生命周期钩子之间的主要区别：
-
命名上的变化：
- Vue 2中的
beforeCreate和created钩子在Vue 3中名称保持不变。 - Vue 2中的
beforeMount和mounted钩子在Vue 3中更名为beforeMount和onMounted。 - Vue 2中的
beforeUpdate和updated钩子在Vue 3中更名为beforeUpdate和onUpdated。 - Vue 2中的
beforeDestroy和destroyed钩子在Vue 3中更名为beforeUnmount和onUnmounted。 - Vue 2中的
activated和deactivated钩子在Vue 3中更名为onActivated和onDeactivated。 - Vue 3引入了新的钩子函数
onRenderTracked和onRenderTriggered。
- Vue 2中的
-
钩子执行顺序的更改：
- 在Vue 2中，父组件的生命周期钩子会先于子组件执行。
- 在Vue 3中，父组件的生命周期钩子和子组件的生命周期钩子并行执行。
-
生命周期API的更改：
- Vue 3引入了
setup()函数作为组件的入口点，取代了Vue 2中的beforeCreate和created钩子。在setup()函数中，可以访问组件的状态和生命周期钩子。 - Vue 3中，
beforeCreate、created和beforeDestroy等钩子中的this指向的是undefined，而不是Vue实例本身。
- Vue 3引入了
需要注意的是，虽然Vue 3进行了一些生命周期钩子的更改和优化，但大部分的生命周期钩子函数在Vue 3中仍然保持了相似的概念和功能。如果你在迁移项目或学习新的Vue版本，要仔细查看官方文档以了解具体的变化和使用方法。
2. Vue 2的生命周期钩子函数有哪些？它们的执行顺序是怎样的？
Vue 2中的生命周期钩子函数按照创建和销毁的顺序，可以分为以下8个：
-
beforeCreate：在实例创建之后，数据观测和事件配置之前被调用。在这个阶段，实例的方法和数据都还没有被初始化。 -
created：在实例创建完成后被调用。在这个阶段，实例已经完成了数据观测、属性和方法的运算，但是还没有开始DOM的渲染。 -
beforeMount：在挂载开始之前被调用。在这个阶段，模板编译已经完成，但是尚未将模板渲染到页面。 -
mounted：在实例挂载到页面后被调用。在这个阶段，实例已经完成了模板的渲染，并挂载到页面上，可以进行DOM操作。 -
beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。在这个阶段，你可以对更新之前的数据进行操作。 -
updated：在数据更新后被调用，发生在虚拟DOM重新渲染和打补丁之后。在这个阶段，DOM已经更新完毕，可以进行操作，但要注意避免无限循环的更新。 -
beforeDestroy：在实例销毁之前被调用。在这个阶段，实例仍然完全可用，可以进行一些清理操作。 -
destroyed：在实例销毁之后被调用。在这个阶段，实例已经解除了所有的事件监听器和绑定的DOM元素，进行最后的清理工作。
这些生命周期钩子函数的执行顺序如下： beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed。
需要注意的是，父组件的生命周期钩子函数在子组件之前执行。 例如，父组件的beforeCreate会先于子组件的beforeCreate执行，以此类推。
3. Vue 3引入了哪些新的生命周期钩子函数？
Vue 3 在组件的生命周期中引入了一些新的钩子函数。下面是一些主要的新生命周期钩子函数：
-
beforeMount：在组件挂载到 DOM 之前调用。它替代了 Vue 2.x 中的beforeCreate和beforeMount钩子函数。 -
onVnodeBeforeMount：在组件的 VNode 被创建并且在挂载之前调用。它是在beforeMount钩子函数之前调用的。 -
onVnodeMounted：在组件的 VNode 被创建之后调用。它替代了 Vue 2.x 中的mounted钩子函数。 -
beforeUpdate：在组件更新之前调用。它替代了 Vue 2.x 中的beforeUpdate钩子函数。 -
onVnodeBeforeUpdate：在组件更新之前调用，但是在子组件被更新之前调用。 -
onVnodeUpdated：在组件更新之后调用，但是在子组件被更新之后调用。 -
beforeUnmount：在组件卸载之前调用。它替代了 Vue 2.x 中的beforeDestroy钩子函数。 -
onVnodeBeforeUnmount：在组件的 VNode 被卸载之前调用。 -
onVnodeUnmounted：在组件的 VNode 被卸载之后调用。它替代了 Vue 2.x 中的destroyed钩子函数。 -
errorCaptured：在捕获一个来自子孙组件的错误时调用。它替代了 Vue 2.x 中的errorCaptured钩子函数。
这些新的生命周期钩子函数提供了更精确的控制组件的生命周期，使得开发者能够更好地处理组件的挂载、更新和卸载过程中的逻辑。
4. Vue的生命周期钩子可以在组件之间进行传递吗？
在 Vue 3 中，生命周期钩子函数不能直接在组件之间进行传递。
相比之下，Vue 2 中的生命周期钩子函数可以由父组件通过
$emit触发子组件的钩子函数。
在 Vue 3 中，你可以通过创建一个 EventBus 或使用其他全局状态管理工具（例如 Vuex）来实现在组件之间传递生命周期钩子函数的效果。具体步骤如下：
- 创建一个独立的 Vue 实例作为 EventBus，示例如下：
// eventBus.js
import { createApp } from 'vue'
const app = createApp({}) // 创建一个空的 Vue 应用实例
const eventBus = app.config.globalProperties.$eventBus = app.mount('#app') // 挂载应用
export default eventBus
- 在发送组件中，使用 EventBus 触发特定的事件：
// SenderComponent.vue
<template>
<button @click="sendEvent">发送事件</button>
</template>
<script>
import { ref } from 'vue'
import eventBus from './eventBus'
export default {
methods: {
sendEvent() {
eventBus.emit('customEvent', 'Hello from SenderComponent!')
}
}
}
</script>
- 在接收组件中，监听特定的事件：
// ReceiverComponent.vue
<script>
import eventBus from './eventBus'
export default {
created() {
eventBus.on('customEvent', (message) => {
console.log(message) // 输出 "Hello from SenderComponent!"
})
}
}
</script>
通过以上方法，你可以模拟在 Vue 3 中通过生命周期钩子函数在组件之间进行传递的效果。尽管它不是直接的生命周期钩子函数传递，但能够实现类似的功能。
5. Vue 3中删除了哪些过时的生命周期钩子函数？
在Vue 3中，有几个过时的生命周期钩子函数被删除或替换了。
以下是一些被删除的或替换的生命周期钩子函数列表：
-
beforeCreate：在Vue 2中用于在实例创建之前执行逻辑的钩子函数，在Vue 3中被setup替代。 -
created：在Vue 2中用于在实例创建之后执行逻辑的钩子函数，在Vue 3中被setup替代。 -
beforeMount：在Vue 2中用于在组件挂载到DOM之前执行逻辑的钩子函数，在Vue 3中仍然存在。 -
mounted：在Vue 2中用于在组件挂载到DOM之后执行逻辑的钩子函数，在Vue 3中被onVnodeMounted替代。 -
beforeUpdate：在Vue 2中用于在组件更新之前执行逻辑的钩子函数，在Vue 3中被onVnodeBeforeUpdate替代。 -
updated：在Vue 2中用于在组件更新之后执行逻辑的钩子函数，在Vue 3中被onVnodeUpdated替代。 -
beforeDestroy：在Vue 2中用于在组件销毁之前执行逻辑的钩子函数，在Vue 3中被beforeUnmount替代。 -
destroyed：在Vue 2中用于在组件销毁之后执行逻辑的钩子函数，在Vue 3中被onVnodeUnmounted替代。
这些过时的生命周期钩子函数在Vue 3中被重新命名或删除，以更好地与Composition API和新的组件模型配合使用。推荐使用setup 函数和新的生命周期钩子函数来管理组件的逻辑。
6. 请解释Vue生命周期中的"beforeCreate"和"created"钩子函数的作用。
在
Vue中，"beforeCreate" 和 "created" 是组件生命周期中的两个钩子函数。
- "
beforeCreate" 钩子函数在组件实例被创建之前调用。在这个阶段，组件实例已经被创建，但尚未完成依赖注入、数据观测、事件/生命周期的配置等。这意味着在 "beforeCreate" 钩子函数中，你无法访问到组件中定义的data、computed、methods、props等属性，也无法获取到 DOM 元素。
"
beforeCreate" 钩子函数通常用于执行一些与组件实例无关的初始化逻辑，例如
- 设置自定义配置
- 初始化非响应式的数据
- .......
可以在此阶段中进行一些全局设置或为后续的生命周期钩子函数做一些准备工作。
- "
created" 钩子函数在组件实例被创建之后调用。在这个阶段，组件实例已经完成了依赖注入、数据观测、事件/生命周期的配置等。此时，你可以访问到组件中定义的所有属性，包括data、computed、methods、props等，但尚未挂载到 DOM 上。
"
created" 钩子函数通常用于执行一些组件初始化的逻辑，例如
- 发送网络请求
- 进行数据初始化
- 订阅事件
- .......
这个阶段是在组件准备就绪，但尚未与 DOM 关联之前进行一些操作的好时机。
以下是使用表格总结的 Vue 生命周期中的 "beforeCreate" 和 "created" 钩子函数的作用：
| beforeCreate | 在组件实例被创建之前调用，用于执行初始化和准备工作 |
| created | 在组件实例被创建之后调用，可访问组件属性，执行组件初始化逻辑 |
在 "beforeCreate" 钩子函数中，组件实例已经被创建但尚未完成依赖注入、数据观测等配置。适合执行与组件实例无关的初始化逻辑，例如设置自定义配置或初始化非响应式的数据。
在 "created" 钩子函数中，组件实例已经完成了依赖注入、数据观测等配置，可以访问组件的所有属性。常用于执行组件初始化的逻辑，如发送网络请求、进行数据初始化、订阅事件等。
请注意，这两个钩子函数都是在组件实例创建阶段调用，尚未关联到真实的 DOM 元素。
总结而言，"beforeCreate" 钩子函数提供了在组件实例被创建之前进行一些初始化和准备工作的机会；而 "created" 钩子函数则在组件实例被创建之后，可以访问组件的所有属性，用于执行一些组件的初始化逻辑。
7. 什么是Vue实例的"mounted"生命周期钩子？它在什么时候被调用？
"mounted" 是 Vue 实例的生命周期钩子之一，它表示组件已经被挂载到 DOM 上。
"mounted" 钩子函数在组件实例被挂载到 DOM 之后调用。在此阶段，组件已经完成了模板编译、数据渲染，并且组件的 DOM 元素已经插入到页面中，可以通过 DOM API 进行操作。
"mounted" 钩子函数是在组件已经和 DOM 关联之后执行的代码逻辑的绝佳时机。你可以在这个阶段进行一些与 DOM 相关的操作，例如修改 DOM 元素的样式、绑定事件监听、进行第三方库的初始化等。
通常情况下，"mounted" 钩子函数在组件的初始化阶段是非常有用的，因为它表示组件已经准备好进行交互，可以与用户进行互动。
需要注意的是，"mounted" 钩子函数只会在组件实例的第一次渲染时被调用。如果组件被销毁后重新渲染，"mounted" 钩子函数不会再次被触发。
8. 请解释Vue生命周期中的"beforeUpdate"和"updated"钩子函数的用途。
"beforeUpdate" 和 "updated" 是 Vue 实例的生命周期钩子函数，用于处理组件数据更新时的操作。
"beforeUpdate" 钩子函数在组件数据发生变化、重新渲染之前被调用。在该阶段，Vue 实例的数据已经更新，但虚拟 DOM 尚未重新渲染。
你可以在这个钩子函数中进行一些数据更新前的准备工作或触发一些操作，例如
- 获取最新数据
- 进行计算
- 发送请求
- ......
"updated" 钩子函数在组件数据更新，虚拟 DOM 重新渲染后被调用。这个阶段表示组件已经根据最新的数据进行了重新渲染，并且相关的 DOM 元素也已经更新。
你可以在此阶段执行一些需要基于组件已更新的 DOM 进行的操作，例如
- 访问更新后的 DOM
- 操作 DOM 元素
- 与第三方库交互
- ...
需要注意的是，避免在 "beforeUpdate" 和 "updated" 钩子函数中对数据进行无限的更新，这可能导致无限的循环更新。同样要注意的是，在这两个钩子函数中对数据进行更改可能会触发新一轮的更新，因此需要小心处理，避免陷入死循环。
总之，"beforeUpdate" 和 "updated" 钩子函数提供了在组件数据更新前后执行自定义操作的时机，在数据更新时处理相关逻辑，确保组件的渲染和 DOM 的更新与应用程序的需求保持一致。
9. Vue的生命周期中的"activated"和"deactivated"钩子函数用于什么？
"activated" 和 "deactivated" 是 Vue 实例的生命周期钩子函数，用于处理组件在被激活和失活（Deactivated）时的操作。
这两个钩子函数通常在使用 Vue Router 或者使用
<keep-alive>组件进行动态组件缓存时使用。
"activated" 钩子函数在组件被激活时调用，即组件在从一个非活动状态变为活动状态时被触发。在 Vue Router 中，当使用 <router-view> 渲染的组件进入了路由的可视范围时，会被激活。你可以在该钩子函数中执行一些与组件激活相关的逻辑，例如加载数据、启动定时器等。
"deactivated" 钩子函数在组件失去活动状态时调用，即组件从活动状态变为非活动状态时被触发。在 Vue Router 中，当使用 <router-view> 渲染的组件离开了路由的可视范围时，会变为非活动状态。你可以在该钩子函数中执行一些与组件失活相关的逻辑，例如清除定时器、取消订阅等，以避免在组件不可见时仍然继续执行不必要的操作。
需要注意的是，这两个钩子函数在普通的组件使用中并不常见，主要用于处理动态组件缓存场景下的特殊需求。在大多数情况下，常用的生命周期钩子函数如 "created"、"mounted"、"beforeUpdate"、"updated" 等更常见更常用。
10. 请解释Vue实例的"beforeDestroy"和"destroyed"生命周期钩子函数的作用。
"beforeDestroy" 和 "destroyed" 是
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端面试必备知识点：HTML和CSS、JS(变量/数据类型/操作符/条件语句/循环;面向对象编程/函数/闭包/异步编程/ES6)、DOM操作、HTTP和网络请求、前端框架、前端工具和构建流程、浏览器和性能优化、跨浏览器兼容性、前端安全、数据结构和算法、移动端开发技术、响应式设计、测试和调试技巧、性能监测等。准备面试时，建议阅读相关的技术书籍、参与项目实践、刷题和练习，以深化和巩固你的知识。
