前端开发面试笔试题2023 收藏共勉（不断更新）
1.vue中的v-if和v-show是做什么用的，两者区别是什么？ 答：两者在使用时皆为切换的作用，但两者不同的地方在于消耗上，v-if在每次切换时消耗较大，而v-show仅在初始化时消耗较大，所以两者要根据场景不同来选择。
2.如何让css只在当前组件中起作用？ 答：在当前的style里后面加上scoped，例 style scoped
3.如何实现双向绑定以及双向绑定的原理？ 答：v-model是实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定。 原理：分两步骤 v-bind绑定一个value属性 v-on指令给当前元素绑定input事件 可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体。
4.vue-loader是什么？使用它的用途有哪些？ 答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。 用途：js可以写es6、style样式可以scss或less、template可以加jade等。
5.NextTick是做什么的？ 答：$nextTick是在下次DOM更新循环结束后之执行迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的DOM。 场景：需要在视图更新之后，基于新的视图进行操作。
6.keep-alive是什么？ 答：keep-alive是vue里内置的一个组件，在前端需要保留当前页面的状态，也就是缓存。对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。
7.key的作用是什么？ 答：key是一个唯一标识符，主要的作用是为了高效的更新虚拟dom。切记key值不可重复！！！
8.watch和computed的区别 答：两者皆为数据监听，但区别在于watch比较消耗性能，与vue性能优化背道而驰，尽量不用。computed是当数据发生改变的时候进行相应的数据变化，由老数据引起新数据的变化，会利用缓存机制对数据进行缓存，只有当依赖书据变化的时候才会进行相应变化。
9.vue组件之间是如何进行传值的？ 答： 父传子
props:['msg']props:{msg: 数据类型}子传父
this.$emit("自定义事件名称"，要传的数据)；methods:{getVal(msg){//msg就是子组件传过来的数据}}兄弟组件传值
通过一个中转busA传值：import bus from '@/common/bus'bus.$emit("toFooter",this.msg);B接收：import bus from '@/common/bus'bus.$on('toFooter',(data)=>{//data就是this.msg})10.vue项目中各个文件夹的作用 答： main.js 入口文件 router.js 前端路由配置文件 store.js vuex的配置文件 app.vue 根组件 views 路由组件 components 在路由组件中引入的其他组件 assets 在vue文件中使用相对路径引入的资源文件
11.axios是什么？怎么使用？描述使用它实现登录功能的流程？ 答：请求后台资源的模块。npm install axios -S装好， 然后发送的是跨域，需在配置文件中config/index.js进行设置。 后台如果是Tp5则定义一个资源路由。js中使用import进来， 然后.get或.post。返回在.then函数中如果成功， 失败则是在.catch函数中
12.vue跨域请求接口代理方式 答：在config/index.js配置一下 然后重启服务 axios.get(“/api/xxx”)就可以了
13.vue的生命周期4个阶段 8个钩子函数 答：vue生命周期分为四个阶段 第一阶段（创建阶段）：beforeCreate，created 第二阶段（挂载阶段）：beforeMount（render），mounted 第三阶段（更新阶段）：beforeUpdate，updated 第四阶段（销毁阶段）：beforeDestroy，destroyed
14.详细说一下你对vue生命周期的理解？ 答：共有八个阶段 创建前后 挂载前后 更新前后 销毁前后 创建前/后：在创建之前，vue实例的el和data都为undefined，没有初始化。在创建阶段，data数据有了但是el还没有。 挂载前/后：在挂载前，vue实例的el和data都初始化了，但还是挂载前的虚拟dom节点，data.message还没替换。在挂载阶段，实例挂载完成，data.message成功渲染 更新前/后：当data发生变化时，会触发这两个方法 销毁/前后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。
15.单页面应用的优缺点有哪些？ 答： 优点： 1.用户体验好，速度快，内容改变无需刷新整个页面，对服务器压力比较小 2.前后端分离式开发 3.页面效果比较炫酷（这一点比较会让甲方爸爸满意） 缺点： 1.不利于seo 2.导航不可用，需要自行实现前进和后退 3.初次加载消耗大，慢 4.页面相对复杂
16.路由的跳转方式 答： < router-link to=“home”> router-link标签会渲染为< a >标签，在tamplate中跳转都是这种； 另一种变成是导航，也就是通过js跳转，比如router.push（“home”） ps： 项目中个人用到最多的式js跳转，但是要注意在跳转路由时如果需要传参的话尽量不要将传的参拼到url后面！！
17.$router 和 $route的区别 答： router是开始跳路由用的 route是接参的时候用的
18.vue-router有哪几种导航钩子？ 答： 1.全局钩子 2.单个路由独享 3.组件
19.vuex有了解吗？ 答：vuex是一种状态管理，集中存储所有组件的状态，可以当作是一个全局仓库
vuex有五种属性：state getter mutation action module
20.MVVM框架是什么？ 答： M代表model数据模型，V代表view视图，VM代表将数据模型和视图相结合
21.接口请求一般放在哪个生命周期中？ 答：接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放在created中
22.简述diff算法过程 答：执行diff算法就是调用patch函数，比较新旧节点，然后不断给真实的DOM打补丁。patch函数接收两种参数，vnode和oldVnode，两个参数分别代表了新节点和旧节点。此时用到了sameVnode(oldVnode, vnode)，如果返回的是true，那么就执行patchVnode，如果返回的是false，那么就将vnode替换oldVnode，将新节点替换给旧节点。
23.vue为何是异步渲染？ 答：如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，考虑到性能问题，vue会在本轮数据更新后再去异步更新视图。
24.vue 的一些指令用法 答： v-html html v-text 元素里显示内容 v-bind:data 绑定动态数据data v-on:click 绑定事件@click v-for 渲染列表，按照数据循环生成所在标签的结构 v-if和v-show 用于隐藏和显示 v-model 双向数据绑定 用于表单
25.vue页面级组件之间传值? 答： 1.使用vue-router进行页面跳转和传参 2.使用本地localstorge 3.使用vuex数据管理传值
26.vue中哪些数组方法可以直接对数组修改实现视图更新 答： push() 在集合中添加元素，并返回新的长度 pop() 从集合中把最后一个元素删除，并返回这个元素的值 shift() 从集合中把第一个元素删除，并返回这个元素的值 unshift() 在集合开头添加一个或