常见面试题整理

1.vue MVVM模式
2、的作用

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
//app.vue 



keep-alive生命周期钩子函数：activated、deactivated
使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

3、Vue.js引入组件的步骤
4、Vue.js使用插件的步骤
5、Vue生命周期函数

 new Vue()//创建vue对象
beforeCreate:创建vue实例之前的钩子函数
Create：实例创建完成之后的钩子函数（编译模板，把data对象里面的数据和vue语法写成的模板编译成html）
beforeMount:开始挂载编译生成的html，到对应位置时触发的钩子函数（此时还没有将变异的html渲染到页面上）
mounted:将编译好的html挂载到页面完成后执行的钩子函数，此时可以进行发送ajax请求获取数据的操作进行数据初始化（mounted在整个实例生命中只执行一次）
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
---------------------------------------------------------------------------------------------------------------------
令面试官满意的、有亮点的回答:
在谈到vue生命周期的时候，我们首先需要创建一个实例，也就是在new Vue()的对象过程中，首先执行了init(init是vue组件里面默认去执行的)，，在init的过程当中首先调用了beforeCreate，然后在injections（注射）和reactivity（反应性）的时候，它会再去调用created。所以在init的时候，事件已经调用了，我们在beforeCreate的时候千万不要去修改data里面赋值的数据，最早也要放在created里面去做（添加一些行为）。
当created完成之后，它会去判断instance（实例）里面是否含有“el”option（选项），如果没有的话，它会调用vm.$mount(el)这个方法，然后执行下一步；如果有的话，直接执行下一步。紧接着会判断是否含有“template”这个选项，如果有的话，它会把template解析成一个render function ，这是一个template编译的过程，结果是解析成了render函数：
render (h) {
  return h('div', {}, this.text)
}
解释一下，render函数里面的传参h就是Vue里面的createElement方法，return返回一个createElement方法，其中要传3个参数，第一个参数就是创建的div标签；第二个参数传了一个对象，对象里面可以是我们组件上面的props，或者是事件之类的东西；第三个参数就是div标签里面的内容，这里我们指向了data里面的text。
使用render函数的结果和我们之前使用template解析出来的结果是一样的。render函数是发生在beforeMount和mounted之间的，这也从侧面说明了，在beforeMount的时候，$el还只是我们在HTML里面写的节点，然后到mounted的时候，它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执行了render function的内容。
在使用.vue文件开发的过程当中，我们在里面写了template模板，在经过了vue-loader的处理之后，就变成了render function，最终放到了vue-loader解析过的文件里面。这样做有什么好处呢？原因是由于在解析template变成render function的过程，是一个非常耗时的过程，vue-loader帮我们处理了这些内容之后，当我们在页面上执行vue代码的时候，效率会变得更高。
beforeMount在有了render function的时候才会执行，当执行完render function之后，就会调用mounted这个钩子，在mounted挂载完毕之后，这个实例就算是走完流程了。
后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。
这就是vue实例从新建到销毁的一个完整流程，以及在这个过程中它会触发哪些生命周期的钩子函数。那说到这儿，可能很多童鞋会问，钩子函数是什么意思？
钩子函数，其实和回调是一个概念，当系统执行到某处时，检查是否有hook，有则回调。说的更直白一点，每个组件都有属性，方法和事件。所有的生命周期都归于事件，在某个时刻自动执行。
其实，当你跟面试官阐述到这儿的时候，面试官基本上已经满意你的回答了，隐约看到了你的技术功底。当然，如果你还想更进一步，让面试官对你刮目相看，达到加分的效果，你还可以这样说：
在这个过程当中，Vue为我们提供了renderError方法，这个方法只有在开发的时候它才会被调用，在正式打包上线的过程当中，它是不会被调用的。它主要是帮助我们调试render里面的一些错误。
renderError (h, err) {
  return h('div', {}, err.stack)
}
有且只有当render方法里面报错了，才会执行renderError方法。
所以我们主动让render函数报个错：
render (h) {
  throw new TypeError('render error')
}

6、Vue-router有哪几种导航钩子

1.全局的
2.单个路由独享的
3.组件级的

全局钩子

//定义一个路由
const router = new VueRouter({ ... })
// 点击导航前调用
router.beforeEach((to, from, next) => {
  // ...
})
// 点击导航后调用
router.afterEach(route => {
  // ...
})

当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 resolve 完之前一直处于 等待中
每个钩子方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
确保要调用 next 方法，否则钩子就不会被 resolved。

单个路由独享的钩子

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeEnter: (route) => {
        // ...
      }
    }
  ]
});

这些钩子与全局 before 钩子的方法参数是一样的。
组件内的钩子
最后，你可以在路由组件内直接定义以下路由导航钩子：
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter 钩子 不能 访问 this，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

你可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。

7、闭包、es6新特性
8、如何把url解析为一个对象 var url="http://t.cn/index?p=0&q=1&r=2"(parseQueryString)
9、vue的data为什么要return返回

使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。
用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题

10、原型链流程
11、继承
12、vuex（vuex里面的三个点函数）

13、vue常用指令、生命周期、组件继承、组件之间通信方式
14、说明一下http常用状态码status含义404、403、500、200、304
15、px和em的区别

任意浏览器的默认字体高都是16px。
所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点 
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

16、link和@import的区别

1、@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5、link引入的样式权重大于@import引入的样式。
---------------------------------------------
CSS 权重优先级顺序简单表示为：
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

QQ截图20180410144236.png

17、css选择符

1）id 选择器（#myid）
2）类选择器（.myclassname）
3）标签选择器（div，h1，p）
4）相邻选择器（h1 + p）
5）子选择器（ul > li）
6）后代选择器（li a）
7）通配符选择器（* ）
8）属性选择器（ a[rel = "external"]）
9）伪类选择器（a: hover, li: nth - child）

18、sessionStorage和localStorage的区别，以及cookes和web storage的区别
19、src和href的区别

1.src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。（src通常用作“拿取”（引入），href 用作 "连结前往"（引用）。）
2.href 是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。
3.src是链接，属于整体替换(替换非叠加)，比如img标签和frame标签；href是超文本引用，属于附属资源，可以叠加。

20、ajax请求的原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

21、ajax的缺点

1、ajax干掉了back按钮，即对浏览器后退机制的破坏。
2、安全问题，开发者在不经意间会暴露比以前更多的数据和服务器逻辑
3、对搜索引擎的支持比较弱

22、跨域的理解，如何解决跨域
23、说下自己对模块化开发的理解，以及模块化开发的好处。

提高开发效率，有利团队协同开发，
避免全局变量污染，命名冲突，
方便代码的复用维护等。

23、开发中遇到了什么兼容问题，怎么解决的
24、页面图片过多，怎么解决（懒加载、实现原理）
25、如何在图片在div中垂直水平居中
26、bootstrap栅格化以及实现原理
27、在项目中遇到过什么令你难理解的问题吗 你是怎么解决的？

附录
面试之js篇