Vue经典面试题总结（2）进阶篇

最新推荐文章于 2025-02-14 14:39:04 发布

huohuoit

最新推荐文章于 2025-02-14 14:39:04 发布

阅读量667

点赞数 1

分类专栏：前端面试 Vue 文章标签： vue 面试 javascript

本文链接：https://blog.youkuaiyun.com/huohuoit/article/details/107340074

版权

前端面试同时被 2 个专栏收录

23 篇文章

订阅专栏

Vue

15 篇文章

订阅专栏

本文深入探讨Vue组件的渲染与更新过程，包括数据为何为函数、事件绑定原理、v-model实现及安全性问题、组件通信方式、生命周期调用顺序、性能优化策略等。同时涉及Vue3.0的改进、Vuex工作原理以及异步组件和路由守卫的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、描述组件渲染和更新过程

渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，并进行实例化。最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程.核心就是diff算法

2、组件中的 data为什么是一个函数?

同一个组件被复用多次，会创建多个实例。这些实例用的是同一个构造函数，如果 data 是一个对象的话。那么所有组件都共享了同一个对象。为了保证组件的数据独立性要求每个组件必须通过 data 函数返回一个对象作为组件的状态。

3、Vue中事件绑定的原理

Vue 的事件绑定分为两种一种是原生的事件绑定，组件的事件绑定

（1）原生 dom 事件的绑定,采用的是 addEventListener 实现

Vue 在创建真是 dom 时会调用 createElm ,默认会调用 invokeCreateHooks
会遍历当前平台下相对的属性处理代码,其中就有 updateDOMListeners 方法,内部会传入 add 方法

vue 中绑定事件是直接绑定给真实 dom 元素的

（2）组件绑定事件采用的是 $on 方法

组件绑定事件是通过 vue 中自定义的 $on 方法来实现的

4、v-model中的实现原理及如何自定义v-model？

v-model 可以看成是 value+input方法的语法糖

5、Vue中v-html会导致哪些问题?

可能会导致 xss 攻击
v-html 会替换掉标签内部的子元素

6、Vue父子组件生命周期调用顺序

加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

子组件更新过程 ：父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程：父beforeUpdate->父updated

销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父

7、Vue组件如何通信? 单向数据流

父子间通信：父->子通过 props 、子-> 父 $on、$emit (发布订阅)

获取父子组件实例的方式：$parent、$children

在父组件中提供数据子组件进行消费：Provide、inject 插件

Ref 获取实例的方式：调用组件的属性或者方法

Event Bus 实现跨组件通信：Vue.prototype.$bus = new Vue

Vuex 状态管理实现通信：$attrs $listeners

8、Vue中相同逻辑如何抽离？

Vue.mixin 用法：给组件每个生命周期，函数等都混入一些公共逻辑

9、为什么要使用异步组件？

如果组件功能多打包出的结果会变大，我可以采用异步的方式来加载组件。主要依赖 import() 这个语法，可以实现文件的分割加载。

components:{
    AddCustomerSchedule:(resolve)=>import("../components/AddCustomer") //
require([])
}

10、什么是作用域插槽?

（1）插槽

创建组件虚拟节点时，会将组件的儿子的虚拟节点保存起来。当初始化组件时,通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]}
渲染组件时会拿对应的slot属性的节点进行替换操作。（插槽的作用域为父组件）

（2）作用域插槽

作用域插槽在解析的时候，不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。（插槽的作用域为子组件）

11、谈谈你对 keep-alive 的了解？

keep-alive 可以实现组件的缓存，当组件切换时不会对当前组件进行卸载。常用的

2个属性 include / exclude
2个生命周期 activated , deactivated
LRU算法

12、Vue中常见的性能优化？

13、Vue3.0你知道有哪些改进?

Vue3 采用了TS来编写
支持 Composition API
Vue3 中响应式数据原理改成 proxy
vdom 的对比算法更新，只更新 vdom 的绑定了动态数据的部分

14、实现hash路由和history路由

onhashchange #
history.pushState h5 api

15、Vue-Router中导航守卫有哪些？

完整的导航解析流程 (runQueue)

导航被触发
在失活的组件里调用离开守卫
调用全局的 beforeEach 守卫
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)
在路由配置里调用 beforeEnter
解析异步路由组件
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve 守卫 (2.5+)
导航被确认
调用全局的 afterEach 钩子
触发 DOM 更新
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

16、action 和 mutation区别？

mutation 是同步更新数据(内部会进行是否为异步方式更新数据的检测) $watch 严格模式下会报错

action 是异步操作，可以获取数据后调佣 mutation 提交最终数据

17、简述Vuex工作原理

18、双向绑定和 vuex 是否冲突?

19、. Vue 中内置组件transition、transition-group 的源码实现原理？

20、说说patch函数里做了啥?

21、知道 vue 生命周期内部怎么实现的么 ?

22、ssr 项目如果并发很大服务器性能怎么优化?

23、说下项目中怎么实现权限校验?

24、讲 vue-lazyloader 的原理，手写伪代码?

25、Vue.set 的原理?

26、vue compile 过程详细说一下，指令、插值表达式等 vue 语法如何生效的?