前端面试

今天和大家分享一下前端面试题，我这里也是汇总别人的，你想找什么样的公司就有什么样得面试题，有些大同小异，有些奇思妙想，BAT这种大公司不仅仅看看面试题就完事，知道自己在哪一层阶梯上选择合适的公司才是最好的，不可好高骛远，不仅进入公司，还要待得住才是最牛班的。上干货，比较杂（vue，react，html，js，css，jq，小程序，各种类库，项目实战流程，难点，性能优化，W3C标准，）【注意】：转化成自己的话再去描述给面试官

1.什么是vue生命周期 ?
vue实例从被创建到销毁的一系列过程就叫vue生命周期. 也就是从开始创建、初始化数据、编译模版、挂载DOM→渲染、更新、渲染、卸载等一系列过程。

2.axios的特点有哪些
axios是一个基于promise的HTTP库,支持promise的所有API
它可以拦截请求和响应
它可以转换请求数据和响应数据,并对响应回来的内容自动转换为json类型的数据
它安全性更高,客户端支持防御XSRF

3.vue父组件怎么给子组件传值?
父组件的数据要通过prop传到子组件

4.mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

5.vue的优点是什么？

      低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
      可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
        独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
        可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

6.组件之间的传值？
父组件与子组件传值
父组件通过标签上面定义传值
子组件通过props方法接受数据

      子组件向父组件传递数据
      子组件通过$emit方法传递参数

7.路由之间跳转
声明式（标签跳转） 编程式（ js跳转）

8.vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。在main.js引入store，注入。新建一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

9.vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module

10.v-show和v-if指令的共同点和不同点
v-show：指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if：指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

11.如何让CSS只在当前组件中起作用
将当前组件的<style>修改为<style scoped>

12.<keep-alive></keep-alive>的作用是什么?
<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

13.在Vue中使用插件的步骤
1：采用ES6的import ... from ...语法或CommonJSd的require()方法引入插件
2： 使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

14.请列举出3个Vue中常用的生命周期钩子函数
created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, el属性目前还不可见 mounted: el被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
activated: keep-alive组件**时调用

15.active-class是哪个组件的属性？
vue-router模块的router-link组件。

16.vue生命周期总共有几个阶段
可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

17.第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

18.DOM 渲染在 哪个周期中就已经完成
DOM 渲染在 mounted 中就已经完成了。
19.简单描述每个周期具体适合哪些场景
生命周期钩子的一些使用方法：
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

20.说出至少4种vue当中的指令和它的用法？
v-if：判断是否隐藏；
v-for：数据循环；
v-bind:class：绑定一个属性；
v-model：实现双向绑定
21.vue-loader是什么？使用它的用途有哪些？
概念.vue文件的一个加载器。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
22.web前端开发，如何提高页面性能优化?
1：优化图片，优化css，
2：减少http请求，
3：css样式的定义放置在文件头部，javascript脚本放在文件末尾，
4：压缩javascript,css代码
23.你所了解到的Web攻击技术
Xss：通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
Sol注入攻击：
Csrf：攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
24.(document).ready()方法和window.onload有什么区别？ (1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。 (2)、(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。
25.如何居中 div,如何居中一个浮动元素?
使用flex布局
给父级元素设置
display:flex;
justify-content: center;
align-items: center;
26.什么是闭包？如何创建闭包？好处有哪些？常用场景有哪些？
闭包是指有权访问另一个函数作用域中变量的函数，
创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,
利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
（其他的作用：参数和变量不会被垃圾回收机制回收）
使用场景：比如轮播图上的小圆点点击切换图片，京东的爬楼效果，通过循环遍历，闭包就可以解决
27.你对事件委托的理解？有什么优缺点？
事件代理，也叫事件委托或者事件冒泡机制。
优点：1.可以大量节省内存，减少事件注册
2.实现新增子对象的事件绑定，利于动态事件加载
缺点：事件代理有可能会出现事件误判，就是本不该触发的事件被绑定上了。
28.git和svn的区别?
svn是比较传统的一种代码托管工具 属于集中式管理，优点是安全性强 缺点是如果连接不到服务器 基本无法工作。一般使用svn的团队会有很严格的权限管理机制，以应对大型团队开发。
Git的特征是分布式开发 优点强调个体，离线工作 灵活性强缺点就是代码保密性差 一旦开发者克隆下项目就能公开全部代码和版本信息。
29.vue数据双向绑定的实现原理
通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
30.axios怎么用，怎么将axios在全局调用
先npm安装
在页面引用
在全局定义时可以将axios绑定到vue原型上
main.js
Vue.prototype.$http=axios