前端面试题记录——vue

目录

前言

一、说一下虚拟DOM？

1.虚拟dom是什么？

2.虚拟dom是怎么产生的？

3.虚拟dom的优点

二、说一下vue-router?有几种模式？

1.vue-router是什么？

2.vue-router有几种模式？区别是什么？

2.1 hash模式

2.1 history模式

3.vue-router有哪些方法？

3.1 跳转方法

3.2 传参方式

4.路由使用步骤？

5.路由导航守卫？

5.1 全局导航守卫

 5.2 单路由导航守卫

5.3 组件内导航守卫

6.如何动态配置路由？

三、v-if和v-show的区别？性能哪个更好？

四、盒子塌陷问题？如何解决？

五、什么阶段可以操作dom?

1. 什么时候可以发起请求呢？

2. 如果要发起异步请求在哪一步比较好呢？

六、讲一下axsio原理？异步原理？

1.axsio是什么？

2.axsio的特性？

3.缺点

4.ajax是什么？

5.ajax步骤

6.ajax优缺点

7.ajax与axsio的区别？

8.异步原理？

9.promise和async？

七、v-if和ref可以一起用吗？

八、后端做了类型限制前端还需要做吗？优点是什么？

九、项目中遇见不会的东西怎么做？

十、详情返回列表如何让他停留上一页的状态？

十一、canvas画布用过吗？

十二、组件间传值方式？兄弟组件怎么传值？父组件绑定事件传子组件？

1. 父传子

2. 子传父

3. 兄弟组件

十三、hr面

总结

---

前言

今天参加了一个面试 ，主要是围绕vue来问的，记录一下吧~

---

一、说一下虚拟DOM？

1.虚拟dom是什么？

虚拟dom是基于js模拟的一个dom节点。

2.虚拟dom是怎么产生的？

在vue中当我们写下一句代码模板的时候，会发生一下步骤：

1. vue会把模块通过渲染函数（render）生成一个虚拟节点（VNode）。
2. 当Model发生变化的时候，vue又会生成一个新的虚拟dom，这时候vue会通过diff算法对比新旧dom之间的差距，然后通过path算法把有差异的地方渲染到页面上，从而实现了局部更新。

3.虚拟dom的优点

因为是通过虚拟节点进行对比再局部更新，避免了直接操作真实dom，减少了浏览器的重绘和重排，从而提高了浏览器的性能，减少内存的消耗。

同时由于虚拟dom是基于js的，所以具有跨平台的优点，可在node 等环境中应用。

二、说一下vue-router?有几种模式？

1.vue-router是什么？

vue-router是vue中的路由管理器，vue是单页面开发的，通过路由来构建页面使得不用刷新页面就可以更新dom，降低dom消耗，在vue中非常的重要。（但是它也有缺点，就是首次加载比较慢。）

vue-router有三个组件：

router-link 跳转（实质是a标签，可以设置to属性跳转和传参）

router-view 子级路由显示

keep-alive 路由缓存（如tab切换，记录之前状态）

2.vue-router有几种模式？区别是什么？

router中有两种模式：hash(哈希模式)和history(历史模式)。

2.1 hash模式

路由默认hash模式，通过hash模式模拟url，这会让url中有个#符号，标志着当前处于hash模式，例如：http://locahost:8080/#/index。

当#后面的路由发生变化的时候，不会重新发起请求，但是会更新页面，这不就是适用于单页面页面嘛。

可以使用 window.location.hash获取值

原理：

hash模式通过hashChange方法监听hash变化，每个页面都有不同的hash值，即使页面刷新，也能定位到刷新时的哪个页面。

方法：

在这种模式下，会生成一个hashHistory对象,这个对象有两种方法：push()和replace()。

例如，HashHistory.push(’/log‘)会将/log这个路由放在栈顶端，此时页面就会跳转过去。

HashHistory.replace('/log')会将栈中最顶端的路由替换调，此时页面也会跳转过去。

优点：

1. hash不存在http请求中，因此hash值改变不会重新加载页面
2. hash可以通过hashChange方法监听，可以前进或后退（历史访问栈中有记录）
3. 兼容性比较好

缺点：

1. 有#符号，不利于seo搜索，看起来不美观
2. 只有路由不同于当前路由才会触发hashChange方法
3. 只能添加短字符串

2.1 history模式

history更像请求一样，没有了#符号，每次都相当于一个请求，但是需要服务器配置，如果没有配置则会出现404的页面。

可以通过window.location.pathname获取值

原理

history是基于h5中的pushState()和replaceState()和浏览器的popState()。例如：http://locahost:8080/index。

方法:

pushState()改变地址，不会发起请求；window.history.pushState(stateObj,title,url);

replaceState()可以读取历史栈中的记录，也修改浏览器记录;window.history.replaceState(stateObj,title,url)

注意：可以指定stateObj为任意类型数据，title可以后续使用

优点：

1. 没有#，看起来美观了
2. 即使输入一模一样的路由，也会触发popState()，也会把记录记录再栈中

缺点：

1. 属于http请求，借助history,pushState()实现页面无刷新跳转，会请求服务器，所以必须和服务端请求url保持一致，否则出现404
2. 兼容性差，特定浏览器才支持

3.vue-router有哪些方法？

3.1 跳转方法

this.$router.push()  //跳转路由 

this.$router.replace()  //替换当前路由

this.$router.go()   //可传入正负，表示前进或后退

this.$router.back()  //回退上一步

3.2 传参方式

这里先说一下，route里面包含了路由信息 ，例如：query params path fullpath matched等，通常获取信息就是用这个，如：this.$route.query.id

router则是实例，包含跳转方法和钩子函数。如：this.$router.push()

     3.2.1 声明式导航传参（不建议）

     第一种，用？号拼接

传参（?拼接）：
:to="{path:'/home?id=111'}">
 
 
取值：
this.$route.query.id

第二种，需要在route里面配置：

route.js里面配置：
 
  {
      path: '/home/:id',//配置属性
      name: 'home',
      component: () => import('@/views/home/index'),
    },
 
传值：
  <router-link :to="{path:'/home/111'}"></router-link>
取值：
this.$route.params.id

        3.2.2 编程式传参（实际开发中常用）

        第一种 query ，指定path

传值：
     
 this.$router.push({
        path:'/home',//指定path
        query:{
          id:'111'
        }
      })
 
取值：
 
this.$route.query.id

        第二种  params，指定name

传值：
 
this.$router.push({
        name:'home', //指定params
        params:{
          id:'111'
        }
      })
 
取值：
this.$route.params.id

params和query的区别？

直观的区别就是query显示在url上，params不显示在路由上。

页面一刷新，query不会不见，params会不见。

4.路由使用步骤？

三个步骤：

引入并应用vue-router —— 创建路由规则和对象 —— 实例化路由对象

 这里要说一下，我们通常会重定向根路径，让用户输入 / 时候跳转home页面，如下：

{
      path: '/', //根目录路由为/
      component: Layout, //指定使用Layout组件布局
      redirect: '/home', //重定向至/home页面
}

同时在route对象最后，协商通配符* ，当没有以上页面的时候，即可以跳转到404页面，如下：

  {
      path: '*', // 此处需特别注意置于最底部
      redirect: '/404',
    },

5.路由导航守卫？

除了跳转和配置页面这些功能，我们还可以用路由来对跳转前后做处理，最常见的如：没有登陆却输入首页的路由，此时就需要路由导航。

路由导航守卫有三种：全局导航守卫、单路由导航守卫、组件内导航守卫

5.1 全局导航守卫

beforeEach： 全局前置守卫 ，进入路由之前

beforeResolve：全局解析守卫，在beforeRouteEnter之后调用

afterEach：全局后置守卫 ，进入路由之后

最常见的就是利用beforeEach判断是否登录，未登录则跳转到登录页面；

跳转新页面后利用afterEach后将滚动条重置到顶部

 5.2 单路由导航守卫

beforeEnter 页面进入之前 如果不想写全局的可以配置在route单个路由里面，使用方法和beforeEach差不多

5.3 组件内导航守卫

beforeRouteEnter:进入组件之前，这个时候dom还没生成，所以要用next()去访问from to next

beforeRouteUpdate: 两个相同组件参数被改变时会触发，如从详情页1 跳转到详情页2 ，url中的参数改变了，就会触发这个方法

beforeRouteLeave:离开组件时调用

6.如何动态配置路由？

可以在路由表中配置constantRouter和ansycRouter两个路由，constant路由对象包括常用的login register 404等页面 ，anyncRouter则是后端返回的角色的路由 ，我们拿到数据后通过 router.addRoutes(anyncRouter)将权限加进去就可以啦。

当然以上针对多种角色，如果只有一两种角色我们可以前端自己通过meta在路由中配置，根据后端返回的角色信息去配置路由。

三、v-if和v-show的区别？性能哪个更好？

v-if和v-show都可以控制dom的显示和隐藏，v-if操纵dom渲染与否，v-show只是通过display:none把元素隐藏了，实际dom中依旧存在。

v-show适用于页面频繁切换的场景。v-if适用于不被频繁切换的场景。

v-show是渲染成本高，v-if是dom切换成本高。相对来说，v-show比v-if的性能好一些，因为v-if操作dom消耗性能。

四、盒子塌陷问题？如何解决？

盒子塌陷场景常见于外盒子设置固定款 ，内盒子设置百分比且有margin或padding的时候。解决方案有很多种，目前认为最好的是是使overflow：hidden让他形成BFC就不会出现这种情况啦。

五、什么阶段可以操作dom?

这里考察vue生命周期（可以熟悉一下）

在mounted的时候可以操纵dom，因为此时dom已经渲染完成了。

1. 什么时候可以发起请求呢？

created、beforeMounted、mounted可以发起请求 ，这一阶段data已经创建完成了

2. 如果要发起异步请求在哪一步比较好呢？

created，因为这个阶段能更快的访问服务器，减少加载时间；同时可以保持一致性，因为ssr不支持bedoreMounted mounted

六、讲一下axsio原理？异步原理？

axsio是基于promise的http请求，那么这里就能考察promise的理解，包括有那些方法。。，同时可能会遇见async awiat，问他的原理，然后问和promise的区别 ，优缺点，然后继续追问异步、同步、调用栈、消息队列、事件轮询。。。。所以这里考察的内容就有这些多，这里强推小jerry有话说的系列文章一节课彻底弄懂promise、async、await（一），非常的通俗易懂。

1.axsio是什么？

axsio是基于promise的一个http库，可用在浏览器和node中。本质上用promise实现对XMLHttpRequest的封装，因此需要实现一个ajax，或者基于http，也可以说对ajax进行了封装），所以还是要结合promise对象进行处理。

2.axsio的特性？

1. 因为是基于promise的库，所以支持一切promise的api。返回结果也是一个promise对象。
2. 在浏览器或node中都能使用。浏览器中创建XMLHttpRequest请求；node中根据核心http实现；
3. 有请求拦截器和响应拦截器，对响应数据自动转化为json。
4. 支持防御XSRF
5. 支持多种请求，如：get post put delete 
6. 支持取消请求

3.缺点

1. 不支持jsonp，需要自己封装
2. 基于xhr实现，所以无法在service worker,web worker中使用

4.ajax是什么？

ajax是对xmlHttpRequest对象的封装，实现页面局部更新，提高用户体验感。

主要原理：客户端向ajax引擎发起请求，ajax引擎向服务器发起请求，服务器处理器请求后返回给ajax引擎，ajax将结果显示在页面上，实现局部刷新。

5.ajax步骤

1. 创建一个xmlHttpRequest对象
2. 设置对象url及验证信息
3. 编写回调函数
4. 发起请求
5. 异步获取返回信息
6. js更新dom

6.ajax优缺点

优点：

1. 减少服务端请求，提高站点性能
2. 局部更新，减少用户等待焦虑，提高了用户体验感
3. 被广泛支持的标准化技术，在js浏览器中就可以运行，不需要插件
4. 异步实现数据交互，不影响用户页面操作
5. 界面和应用相分离

缺点：

1. 取消back和history功能，后退键失效
2. 对seo和移动端不友好
3. 与服务端交互信息暴露，不安全
4. 违背url与资源定位的初衷
5. 客户端代码多，开发成本高
6. 破环程序异常处理机制

7.ajax与axsio的区别？

ajax是对xhr的封装，axsio是promise封装的http请求，其中也对ajax进行了封装。他们都能实现异步更新页面。

8.异步原理？

我们有同步和异步之分，首先说一下同步，同步是指当我们执行程序的时候，按顺序执行，前一步完成了菜会执行下一步，如果有一步卡住了，等待时间就会很长，更恐怖的是后面会奔溃（专业用词叫阻塞），这也是同步的一个缺点。

那异步就是执行程序的时候，把他们都放在一个执行栈中，当执行主线程的时候遇见了耗时比较长的如：setTimeout、setInterver等，就会他们放到消息队列（这里还会有微任务、宏任务、事件轮询，推荐大家去看这一篇：一节课彻底弄懂promise、async、await（一））中去，等当前函数执行到最后的时候，就会去执行消息队列中的任务。执行完后在继续主线程执行。

目前实现异步的方法有两种：promise和async awiat

9.promise和async？

我们程序中出现”回调地狱“，promise的出现就是解决方法之一。

promise和async都是异步实现方法，所以不会出现阻塞的情况。

async是基于promise的，比promise更加的简洁，代码可读性更高，且返回的也是一个promise对象（如果不是对象，就返回表达式结果）。

promise需要.then来调用，async采用了generator的语法糖，所以不需要then直接就能调用并返回结果。

promise用.then和.catch捕捉结果，而async的try catch捕捉。

七、v-if和ref可以一起用吗？

不可以，因为v-if为false的时候不会渲染dom ，此时用ref去获取dom是没有任何作用的。

八、后端做了类型限制前端还需要做吗？优点是什么？

需要，如果前端不校验数据重复提交 http请求过多消耗性能，同时用户体验也不好，所以前端最好还是校验一下。

九、项目中遇见不会的东西怎么做？

先自己思考、不会再问人

要巧用工具：bing stackoverflow等

十、详情返回列表如何让他停留上一页的状态？

可以用vuex保留数据，返回时重新调用

可以用cookie

（我觉得可以用keep-alive 也可行下次试试）

十一、canvas画布用过吗？

略~

十二、组件间传值方式？兄弟组件怎么传值？父组件绑定事件传子组件？

1. 父传子

通过props传参

2. 子传父

子组件：通过$emit（“方法”，“参数”）

父组件：组件上绑定方法使用，如：@click="方法（参数）"

3. 兄弟组件

1.可以通过vuex实现

2.evenbus实现

• js中new Vue实例
• 在要使用的组件中import这个文件
• 传递 ：this.root.$emit("方法","参数")
• 监听：this.root.$on(方法)

十三、hr面

上一家离职原因？

职业规划?

期望薪资？

最大收获？

---

总结

以上就是今天要讲的内容，面试题不仅仅是背题，也会拓展知识面，后续工作中若遇见bug也能第一时间定位问题，这一点是非常重要的，每一个知识点都要熟悉，才会和其他的融会贯通，好啦，今天就到这里啦~希望对你有帮助，后续也会继续更新面试题，感兴趣就关注我等待吧