2023前端面试系列-- Vue 篇

Vue 常见面试题总结

MVVM模型？

MVVM，是Model-View-ViewModel的简写，其本质是MVC模型的升级版。其中 Model 代表数据模型，View 代表看到的页面，ViewModel是View和Model之间的桥梁，数据会绑定到ViewModel层并自动将数据渲染到页面中，视图变化的时候会通知ViewModel层更新数据。以前是通过操作DOM来更新视图，现在是数据驱动视图。

Vue的生命周期

Vue 的生命周期可以分为8个阶段：创建前后、挂载前后、更新前后、销毁前后，以及一些特殊场景的生命周期。Vue 3 中还新增了是3个用于调试和服务端渲染的场景。

Vue 2中的生命周期钩子	Vue 3选项式API的生命周期选项	Vue 3 组合API中生命周期钩子	描述
beforeCreate	beforeCreate	setup()	创建前，此时data和 methods的数据都还没有初始化
created	created	setup()	创建后，data中有值，尚未挂载，可以进行一些Ajax请求
beforeMount	beforeMount	onBeforeMount	挂载前，会找到虚拟DOM，编译成Render
mounted	mounted	onMounted	挂载后，DOM已创建，可用于获取访问数据和DOM元素
beforeUpdate	beforeUpdate	onBeforeUpdate	更新前，可用于获取更新前各种状态
updated	updated	onUpdated	更新后，所有状态已是最新
beforeDestroy	beforeUnmount	onBeforeUnmount	销毁前，可用于一些定时器或订阅的取消
destroyed	unmounted	onUnmounted	销毁后，可用于一些定时器或订阅的取消
activated	activated	onActivated	keep-alive缓存的组件激活时
deactivated	deactivated	onDeactivated	keep-alive缓存的组件停用时
errorCaptured	errorCaptured	onErrorCaptured	捕获一个来自子孙组件的错误时调用
—	renderTracked	onRenderTracked	调试钩子，响应式依赖被收集时调用
—	renderTriggered	onRenderTriggered	调试钩子，响应式依赖被触发时调用
—	serverPrefetch	onServerPrefetch	组件实例在服务器上被渲染前调用

**关于Vue 3中的生命周期建议阅读官方文档<img src=“https://link.juejin.cn/?target=https%3A%2F%2Fcn.vuejs.org%2Fapi%2Fcomposition-api-lifecycle.html “https://cn.vuejs.org/api/composition-api-lifecycle.html”)[选项式 API：生命周期选项–官方文档](https://link.juejin.cn/?target=https%3A%2F%2Fcn.vuejs.org%2Fapi%2Foptions-lifecycle.html “https://cn.vuejs.org/api/options-lifecycle.html”” style=“margin: auto” />

父子组件的生命周期：* 加载渲染阶段：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 更新阶段：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
• 销毁阶段：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

Vue.$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

nextTick 是 Vue 提供的一个全局 API，由于 Vue 的异步更新策略，导致我们对数据修改后不会直接体现在 DOM 上，此时如果想要立即获取更新后的 DOM 状态，就需要借助该方法。

Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue 将开启一个异步更新队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入队列一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的 DOM 操作完成后才调用。

使用场景：

1.如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()
2.在created生命周期中进行DOM操作

Vue 实例挂载过程中发生了什么？

挂载过程指的是 app.mount()过程，这是一个初始化过程，整体上做了两件事情：初始化和建立更