前端面试题

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

 箭头函数 genertor  arguments  模板字符串  解构赋值 let/const  ...运算符 promise
 Class类  async/await  set/map
1
2

2、Css3的新特性有哪些

过渡 动画 分栏布局 圆角效果 阴影 背景色渐变 弹性盒子 旋转 溢出添加滚动条
1

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

Promises是异步编程操作，相对于基本的异步操作---回调函数和事件更强大更合理
所谓promise相当于一个容器，里面包含着未来某个时间才能有结果的方法，
promise也可以是一个对象能拿到promise成功返回的结果
1
2
3

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

深拷贝:层层拷贝，每一层都拷贝，会产生一个和原对象一模一样的对象，但是数据不是共享的，
浅拷贝：只拷贝对象的一个节点，但是数据是共享的
1
2

//方法
function deepCopy(data) {
            //1.先声明一个空数组，空对象
            //调用getType方法来判断是什么类型的数据
            if(getType(data) == "Array"){
                var res = [];
            }else if(getType(data) == "Object"){
                var res = {};
            }
 
 
            //2.循环将原有数据中的内容，一个一个复制到空数据里面
            for(var key in data){
                //3.如果复制的值还是 引用数据类型，这个部分也需要进行深拷贝
                if(getType(data[key]) == "Array" || getType(data[key]) == "Object"){
                    res[key] = deepCopy(data[key]);
                }else{
                    res[key] = data[key];
                }
            }
           
            //4.返回复制好的对象
            return res;
            
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

Typeof  instaceof  consturtor  object.protype.toString.call()
1

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

原型：任何一个js类型在定义的时候会产生一个_ _proto_ _的原型对象，这就是我们所说的原型
原型链：每一个对象都有自己的原型对象，任何一个对象都可以成为其他对象的原型对象，
但是原型对象也属于对象，因此他也有自己的原型对象，这样就形成了一个链条，这就是原型链，
最终上述到object.propertype(),object.propertype()也有自己的原型，它的原型是null因此原型链的尽头就是null
1
2
3
4

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

闭包是：函数跟其周围的状态的集合，是一个可以访问其他函数内部变量的函数，
在js中只有函数内部的函数次可以访问该函数内部的变量，因此可以说闭包是一个函数返回函数
优点：可以访问其他函数内部的变量，并一直保存在其中
缺点：容易造成内存泄露
应用场景：当一个函数需要访问其他函数内部的变量的时候用闭包
1
2
3
4
5

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

如果data是一个对象，因为data是一个引用数据类型，多次调用data的话会产生很多的实例，
本质上说这些实例都属于同一个构造函数，为了防止data的重复调用，所以data必须是一个函数
1
2

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

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

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

params和query
This.$route.params
This.$route.query
1
2
3

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

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

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

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

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

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

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

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

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

全局导航守卫：beforeEach、beforeResolve、afterEach
组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
路由独享守卫：beforeEnter
To：即将要进入的目标 路由对象（$route）
From：当前导航正要离开的路由对象（$route）
Next()：路由确认回调函数、next(false): 中断当前的导航、next('/')：跳转到一个不同的地址
1
2
3
4
5
6

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

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

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

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

18、说一下对slot的理解

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

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
1
2
3
4
5
6
7
8
9
10

20、说一下对keep-alive的理解，以及keep-alive的使用场景

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下props属性：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max - 数字。最多可以缓存多少组件实例
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，
这时候可以按需来控制页面的keep-alive
1
2
3
4
5
6
7
8
9

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

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

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

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

总结：

这些都是近期比较常见的面试题，希望能帮助到找工作的你，以后也会持续更新更多的内容，想了解更多点我主页，谢谢观看！