2023年前端面试题

前言

前端关于vue的面试题

---

提示：以下是本篇文章正文内容，下面案例可供参考

1、ES6的新特性有哪些，举例说明。

Let const 箭头函数 点点点运算符 变量的解构赋值
简化对象写法 形参的默认值 模板字符串 Promise symbol class类 for in for of Set map
generator（接呢瑞特）

2、Css3的新特性有哪些

1、圆角效果；2、图形化边界；3、块阴影与文字阴影；4、使用RGBA实现透明效果；5、渐变效果；6、使用“@Font-Face”实现定制字体；7、多背景图；8、文字或图像的变形处理；9、多栏布局；10、媒体查询等。

3、说一说你对promise的理解。

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

4、什么是深拷贝和浅拷贝？以及封装实现深拷贝的方法

深拷贝：层层拷贝 每一层的数据都会拷贝 — 产生了新的数据
浅拷贝：只拷贝一层数据，深层次对象级别的只拷贝了地址 – 拷贝引用

5、判断数据类型的方法有哪些

Instanceof constructor object.prototype.toString.call() typeOf

6、什么是原型和原型链说一下你的理解

在JavaScript中有这么一句话万物皆可对象
在声明一个函数跟对象的时候 它在声明的时候就有一个原型对象prototype
这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。
而protortype 的指向是它的隐式原型 proto

所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）最终都可以上溯到Object.prototype Object.prototype对象有没有它的原型呢？回答Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。

7、说一下对闭包的理解，以及闭包的应用场景

是一个可以读取其他函数内部变量的函数，在js中只有函数内部的函数才可以读取该函数内部的变量，因此，闭包可以是一个函数中返回的函数。
闭包的好处：可以读取其他函数内部的变量，并将其一直保存在内存中。
坏处： 可能会造成内存泄露或者内存溢出

8、vue组件中data为什么是一个返回对象的函数

如果data是对象的话，由于对象是引用类型，组件被复用的话，就会创建多个实例。 本质上，这些实例用的都是同一个构造函数。这样就会影响到所有的实例，所以为了保 证组件不同的实例之间data不冲突，data必须是一个函数。

9、写出除了vuex以外，写出6种组件通信的方式，并解释每种通信方式是如何通信的

1.父子通信：父组件使用props组件传递数据，子组件通过事件向父组件发送消息使用
2.子组件给父组件传递值：通过子组件内$emit触发自定义事件，子组件使用时v-on绑定自定义事件3.任意组件之间通信$emit.$on:eventBus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时合适
4.v-model，在props中通过input接收，value对参数进行改变
5.父组件通过ref调用子组件方法
6.使用 $ parent和 $ children获取父子组件的参数

10、vue-router路由传参有哪些方法，如何获取路由参数。

params和query
This.$route.paramsThis.$route.query

11、vuex是什么？怎么使用？哪种功能场景使用它

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
This.$store.commit(‘参数’,传递的值)This.$store.state.参数 — 接收
单页应用中，组件之间的数据状态。

12、Vue-router中hash模式和history模式的区别

hash模式的URL中会夹杂着#号，而history没有。
Vue底层对它们的实现方式不同:
hash模式是依靠onhashchange事件(监听location.hash的改变)
history模式是主要是依靠pushState() replaceState()
pushState()：可以创建新的历史记录
replaceState()：只能修改当前历史记录
当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生一个错误

13、说一下vue2的生命周期函数以及各个生命周期函数的作用

创建前：Beforecreate 实例已经初始化，但不能获取DOM节点。(没有data，没有el)
创建后：Created 实例已经创建，仍然不能获取DOM节点。(有data，没有el)
挂载前：beforemount 模板编译完成，但还没挂载到界面上。(有data，有el)
挂载后：Mounted 编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新前：beforeupdate 数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
更新后：Updated 更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁前：beforedestroy 当要销毁vue实例时，在销毁之前执行。
销毁后：Destroyed 在销毁vue实例时执行。

14、Vue 是如何实现双向绑定的

vue的双向绑定指的是数据变化更新视图，视图变化更新数据。
视图变化更新数据一般就采用事件监听的方式就可以了，数据变化更新视图就需要涉及响应式原理。
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

15、Vue 中有哪些导航守卫，并写出导航守卫函数接收的三个参数有什么作用

全局导航守卫：beforeEach、beforeResolve、afterEach
组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
路由独享守卫：beforeEnter

To：即将要进入的目标 路由对象（$route）From：当前导航正要离开的路由对象（$route）
Next()：路由确认回调函数、next(false): 中断当前的导航、next(‘/’)：跳转到一个不同的地址

16、写一下 Object.defineProperty 与proxy的区别

通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，

17、说一下对vue中mixin的理解以及应用场景

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能
将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

18、说一下对slot的理解

所谓的插槽简单的说就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显 示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤slot的插槽.
⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有slot标签上指定 name属性,⽽在对应标签上添加v-slot属性.
在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽

19、说一下vue2与vue3的区别

1.vue2和vue3双向数据绑定原理发生了改变
vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。
相比与vue2，使用proxy API 优势有：defineProperty只能监听某个属性，不能对全对象进行监听；可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。

2.Vue3支持碎片（Fragments）
就是说可以拥有多个跟节点。

3. Composition API
   Vue2 与vue3 最大的区别是vue2使用选项类型api，对比vue3合成型api
   20、说一下对keep-alive的理解，以及keep-alive的使用场景
   eep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
   keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
   keep-alive可以设置以下props属性：
   include - 字符串或正则表达式。只有名称匹配的组件会被缓存
   exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
   max - 数字。最多可以缓存多少组件实例
   当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
   从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

21、Vue中为什么要用到路由懒加载并写出路由表中路由懒加载的写法

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
()=>import(‘引入路由地址’)

22、写一下命名视图以及嵌套路由

嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件
名视图和具名插槽很像, 都是让不同的出口显示不同的内容
命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同
如果不起名字默认名字就是default

---

总结

以上为vue面试的总结