2020年前端面试题汇总

Vue面试题正文：
1.vue全家桶包含哪些？

答案：vue全家桶：
   vue（整体架构） +  vuex（状态管理） +  vue-router（路由） +  vue_resource || axios（ajax请求） +  mint-UI(移动端UI框架库) || antd-vue(PC端UI框架库)

   react全家桶：
   react（整体架构） +  redux || mobx（状态管理） +  react-router（路由） +  axios（ajax请求） +  antd || react-material || antd-model(UI框架库)

2.v-model是什么？怎么使用？vue中标签怎么绑定事件？

答案：v-model可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：

3.v-model的实现原理？

答案：https://blog.csdn.net/weixin_43606158/article/details/99131754

4.请说一下vue的生命周期。

答案：https://blog.csdn.net/weixin_43606158/article/details/90116309

5.请说出至少4种vue当中的指令和它的用法。

答案：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定。（其他的请看vue官网）

6.请说出v-if和v-show的区别。

答案：https://blog.csdn.net/weixin_43606158/article/details/99131956
相同点：
v-if与v-show都可以动态控制dom元素显示隐藏
不同点：
v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

7.active-class是哪个组件的属性？

答案：vue-router模块的router-link组件。

8.vue嵌套路由怎么定义？

答案：https://blog.csdn.net/weixin_43606158/article/details/99132101

9.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

答案：
在router目录下的index.js文件中，对path属性加上/:id。
使用router对象的params.id获取参数。

10.vue-router有哪几种导航钩子？

答案：三种：
第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子。
第三种：单独路由独享组件。

11.iframe的优缺点？

答案：iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。
优点：
解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本
方便制作导航栏
缺点：
iframe会阻塞主页面的Onload事件
即使内容为空，加载也需要时间
没有语意
12.请讲讲你对axios或者其他请求方式的使用。

答案  ：https://blog.csdn.net/weixin_43606158/article/details/91409361

13.axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

答案：跨域，添加用户操作，更新操作。

14.vuex是什么？怎么使用？哪种功能场景使用它？

答案：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车。

15.mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

答案：一个model+view+viewModel框架，数据模型model，viewModel连接两个

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷

16.自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

答案：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

钩子函数参数：el、binding

17.vue-router是什么？它有哪些组件？

答案：vue用来写路由的一个插件。router-link、router-view

18.导航钩子有哪些？它们有哪些参数？

答案：
导航钩子包括：
a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数：
有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种。

19.请说下封装 vue 组件的过程？

答案：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件，可以采用emit方法。

20.你是怎么认识vuex的？

答案：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。

应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

21.vue-loader是什么？使用它的用途有哪些？

答案：解析.vue文件的一个加载器，跟template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

22.请说出vue.cli项目中src目录每个文件夹和文件的用法？

答案：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

23.聊聊你对Vue.js的template编译的理解？
答案：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）

24.vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

答案：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default 将组件导出。

第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’

第三步：注入到vue的子组件的components属性上面,components:{smithButton}

第四步：在template视图view中使用，
问题有：smithButton命名，使用的时候则smith-button。

25.dom是在哪一个生命周期完成渲染的？

答案：在 mounted 中就已经完成了

26.第一次页面加载会触发哪几个生命周期？

答案：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个生命周期。

27.vue生命周期的作用是什么？

答案：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

28.如何解决vue修改数据不刷新页面这个问题？
答案：
第一种：this.$set
第二种：给数组、对象赋新值
第三种：使用this.$forceupdate强制刷新

29.为什么会出现vue修改数据后页面没有刷新这个问题？
答案：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。





1.CSS选择符有哪些？哪些属性可以继承？
*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）

*   可继承的样式： font-size font-family color, UL LI DL DD DT;

*   不可继承的样式：border padding margin width height ;

2.CSS优先级算法如何计算？
*   优先级就近原则，同权重情况下样式定义最近者为准;
*   载入样式以最后载入的定位为准;

优先级为:
    同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
    !important >  id > class > tag
    important 比 内联优先级高

4.如何居中div？
作者：慕课网
链接：https://www.zhihu.com/question/41466747/answer/580294247
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1、水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div{
    width:200px;
    margin:0 auto;
 }

2、水平垂直居中一

确定容器的宽高 宽500 高 300 的层
设置层的外边距

div {
    position: relative;     /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
    background-color: pink;     /* 方便看效果 */

 }

3、水平垂直居中二

未知容器的宽高，利用 `transform` 属性

div {
    position: absolute;     /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;     /* 方便看效果 */

}

4、水平垂直居中三

利用 flex 布局
实际使用时应考虑兼容性

.container {
    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

}
.container div {
    width: 100px;
    height: 100px;
    background-color: pink;     /* 方便看效果 */
}



5.CSS3有哪些新特性？
新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）
  圆角            （border-radius:8px）
  多列布局      （multi-column layout）
  阴影和反射   （Shadow\Reflect）
  文字特效      （text-shadow、）
  文字渲染      （Text-decoration）
  线性渐变      （gradient）
  旋转            （transform）
  缩放,定位,倾斜,动画,多背景
  例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:



6.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
 在布局上有了比以前更加灵活的空间。



1.js的基本数据类型。
 Undefined、Null、Boolean、Number、String、
 ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )

2.JavaScript原型，原型链 ? 有什么特点？
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，
如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，
于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.__proto__

特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，
 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。

4.Javascript如何实现继承？
1、构造继承2、原型继承3、实例继承4、拷贝继承

6.闭包
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性：1.函数内再嵌套函数2.内部函数可以引用外层的参数和变量3.参数和变量不会被垃圾回收机制回收//li节点的onclick事件都能正确的弹出当前被点击的li索引

7.Ajax 是什么? 如何创建一个Ajax？
ajax的全称：Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新