前言

一、说一下虚拟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中当我们写下一句代码模板的时候，会发生一下步骤：

vue会把模块通过渲染函数（render）生成一个虚拟节点（VNode）。
当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')会将栈中最顶端的路由替换调，此时页面也会跳转过去。

优点：

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

缺点：

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

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可以后续使用

优点：

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

缺点：

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

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 声明式导航传参（不建议）

第一种，用？号拼接

传参（?拼接）：
<router-link :to="{path:'/home?id=111'}"></router-link>


取值：
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通过display:none来操纵dom渲染与否，v-show只是把元素隐藏了，实际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的特性？

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

3.缺点

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

4.ajax是什么？

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

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

5.ajax步骤

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

6.ajax优缺点

优点：

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

缺点：

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

7.ajax与axsio的区别？

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

8.异步原理？

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

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

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