2023 前端开发面试笔试题库（一） 自组题库集锦，相互鼓励（不断更新中）

1、描述组件渲染和更新的过程答：vue组件初次渲染过程：解析模板为render函数触发响应式，监听data属性的getter和setter执行render函数，生成vnode，patch(elem,vnode)vue组件更新过程：修改data，触发setter（此前在getter中已被监听）重新执行render函数，生成newVnode，patch(vnode,newVnode)

2、watch和computed的区别答：两者皆为数据监听，但区别在于watch比较消耗性能，与vue性能优化背道而驰，尽量不用。computed是当数据发生改变的时候进行相应的数据变化，由老数据引起新数据的变化，会利用缓存机制对数据进行缓存，只有当依赖书据变化的时候才会进行相应变化。

3、NextTick是做什么的？答：$nextTick是在下次DOM更新循环结束后之执行迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM。场景：需要在视图更新之后，基于新的视图进行操作。

4、如何实现双向绑定以及双向绑定的原理？答：v-model是实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定。原理：分两步骤v-bind绑定一个value属性v-on指令给当前元素绑定input事件可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体。

5、vue组件之间是如何进行传值的？答：父传子

6、简述diff算法过程答：执行diff算法就是调用patch函数，比较新旧节点，然后不断给真实的DOM打补丁。patch函数接收两种参数，vnode和oldVnode，两个参数分别代表了新节点和旧节点。此时用到了sameVnode(oldVnode,vnode)，如果返回的是true，那么就执行patchVnode，如果返回的是false，那么就将vnode替换oldVnode，将新节点替换给旧节点。

7、vue中哪些数组方法可以直接对数组修改实现视图更新答：push()在集合中添加元素，并返回新的长度pop()从集合中把最后一个元素删除，并返回这个元素的值shift()从集合中把第一个元素删除，并返回这个元素的值unshift()在集合开头添加一个或更多元素，并返回新的长度splice()通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容sort()用来排序，默认是按照每个字符的unicode位进行排序reverse()倒序排列原数组

8、vue常用的修饰符答：.stop——调用event.stopPropagation()，禁止事件冒泡.prevent——调用event.preventDefault()，阻止事件默认行为.capture——添加事件侦听器时使用capture模式.self——只当事件是从侦听器绑定的元素本身触发时才触发回调.native——监听组件根元素的原生事件.once——只触发一次回调.number——输入字符串转为数字.trim——过滤空格

9、页面闪动问题如何解决答：使用v-cloak

10、vue的一些指令用法答：v-htmlhtmlv-text元素里显示内容v-bind:data绑定动态数据datav-on:click绑定事件@clickv-for渲染列表，按照数据循环生成所在标签的结构v-if和v-show用于隐藏和显示v-model双向数据绑定用于表单

11、详细说一下你对vue生命周期的理解？答：共有八个阶段创建前后挂载前后更新前后销毁前后创建前/后：在创建之前，vue实例的el和data都为undefined，没有初始化。在创建阶段，data数据有了但是el还没有。挂载前/后：在挂载前，vue实例的el和data都初始化了，但还是挂载前的虚拟dom节点，data.message还没替换。在挂载阶段，实例挂载完成，data.message成功渲染更新前/后：当data发生变化时，会触发这两个方法销毁/前后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

12、什么是Mixin？答：将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。

13、axios是什么？怎么使用？描述使用它实现登录功能的流程？答：请求后台资源的模块。npminstallaxios-S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

14、单页面应用的优缺点有哪些？答：优点：用户体验好，速度快，内容改变无需刷新整个页面，对服务器压力比较小前后端分离式开发页面效果比较炫酷（这一点比较会让甲方爸爸满意）缺点：不利于seo导航不可用，需要自行实现前进和后退初次加载消耗大，慢页面相对复杂

15、如何让css只在当前组件中起作用？答：在当前的style里后面加上scoped，例stylescoped

16、key的作用是什么？答：key是一个唯一标识符，主要的作用是为了高效的更新虚拟dom。切记key值不可重复！！！

17、vue的生命周期4个阶段8个钩子函数答：vue生命周期分为四个阶段第一阶段（创建阶段）：beforeCreate，created第二阶段（挂载阶段）：beforeMount（render），mounted第三阶段（更新阶段）：beforeUpdate，updated第四阶段（销毁阶段）：beforeDestroy，destroyed

18、MVVM框架是什么？答：M代表model数据模型，V代表view视图，VM代表将数据模型和视图相结合

19、keep-alive是什么？答：keep-alive是vue里内置的一个组件，在前端需要保留当前页面的状态，也就是缓存。对应两个钩子函数activated和deactivated，当组件被激活时，触发钩子函数activated，当组件被移除时，触发钩子函数deactivated。

20、vue为何是异步渲染？答：如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，考虑到性能问题，vue会在本轮数据更新后再去异步更新视图。

21、vue页面级组件之间传值?答：使用vue-router进行页面跳转和传参使用本地localstorge使用vuex数据管理传值

22、vue-loader是什么？使用它的用途有哪些？答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。用途：js可以写esstyle样式可以scss或less、template可以加jade等。

23、v-on可以监听多个方法吗？答：v-on可以监听多个方法，但是同一种事件类型的方法，vue-cli工程会报错。

24、vue中的v-if和v-show是做什么用的，两者区别是什么？答：两者在使用时皆为切换的作用，但两者不同的地方在于消耗上，v-if在每次切换时消耗较大，而v-show仅在初始化时消耗较大，所以两者要根据场景不同来选择。

25、Mixin和Vuex的区别？答：Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

26、路由的跳转方式答：router-link标签会渲染为标签，在tamplate中跳转都是这种；另一种变成是导航，也就是通过js跳转，比如router.push（“home”）ps：项目中个人用到最多的式js跳转，但是要注意在跳转路由时如果需要传参的话尽量不要将传的参拼到url后面！！

27、vuex有了解吗？答：vuex是一种状态管理，集中存储所有组件的状态，可以当作是一个全局仓库

28、vue-router有哪几种导航钩子？答：全局钩子单个路由独享组件

29、vue跨域请求接口代理方式答：在config/index.js配置一下然后重启服务axios.get(“/api/xxx”)就可以了

30、接口请求一般放在哪个生命周期中？答：接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放在created中

31、为什么做首屏优化？如何做？答：首屏时间的快与慢，直接影响到了用户对网站的认知度。所以首屏时间的长短对于用户的滞留时间的长短、用户转化率都尤为重要。

32、$router和$route的区别答：router是开始跳路由用的route是接参的时候用的

33、vue项目中各个文件夹的作用答：main.js入口文件router.js前端路由配置文件store.jsvuex的配置文件app.vue根组件views路由组件components在路由组件中引入的其他组件assets在vue文件中使用相对路径引入的资源文件