2023前端开发面试笔试题（一）自整理题库收藏共勉(不断更新)

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

前端开发面试笔试题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.NextTic k是做什么的？
答：$nextTi c k是在下次DOM更新循环结束后之执行迟回调，在修改数据之后使用 $nextTi c k，则可以在回调中获取更新后的DOM。
场景：需要在视图更新之后，基于新的视图进行操作。

6.keep–a live是什么？
答：keep–a live是vue里内置的一个组件，在前端需要保留当前页面的状态，也就是缓存。对应两个钩子函数 activate d 和 de activated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 de ac tiva ted。

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

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

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

        <!--父组件--&gt;
        <Header :msg='msg'&gt;</Header&gt;
        <!--子组件--&gt;
        props:['msg']
        props:{
            msg: 数据类型
        }

子传父

         <!--子组件-->
        this.$emit("自定义事件名称"，要传的数据)；
        <!--父组件-->
        <Header @childInput='getVal'></Header>
        methods:{
            getVal(msg){
                //msg就是子组件传过来的数据
            }
        }

兄弟组件传值

        <!--兄弟组件传值-->
        通过一个中转bus
        A传值：
            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 生命周期分为四个阶段
第一阶段（创建阶段）：beforeCre ate，created
第二阶段（挂载阶段）：beforeMount（render），mounted
第三阶段（更新阶段）：beforeUp date，updated
第四阶段（销毁阶段）：beforeDestroy，dest ro yed

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() 在集合中添加元素，并返回新的长度
 p op() 从集合中把最后一个元素删除，并返回这个元素的值
shift() 从集合中把第一个元素删除，并返回这个元素的值
unshift() 在集合开头添加一个或更多元素，并返回新的长度
 splice() 通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容
sort() 用来排序，默认是按照每个字符的unicode位进行排序
 reverse() 倒序排列原数组

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

css 模块化加载，对应模块下的css交给js或jsonp 请求返回
js懒执行，有交互才执行
 图片在其他屏（非首屏）都采用懒加载的模式，这样既能节省流量，也能减少请求数或延迟请求数。
服务器方面：
（1）少量静态文件的域名，图片与iconfont均是放在同一个域下，减少DNS的解析事件，最好做到域名收敛。
（2）模块化接口的支持。
（3）首屏内容最好做到静态缓存
（4）对于vue和react做ssr

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

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

30.页面闪动问题如何解决
答：使用v-cloa k

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

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