前端面试整理（一）

前端面试整理（一）

这是第一次电话面试，然后提问我的一些问题，现在我给他整理一下：

一、如何让一张大小不确定的图片水平垂直居中

1.利用display:table-cell

html代码如下：

<div class="img_wrap">
 　　<img src="test.jpg">
 </div>

CSS代码如下：

 .img_wrap{
     width: 400px;
     height: 300px;
     border: 1px dashed #ccc;
     display: table-cell; //主要是这个属性
     vertical-align: middle;
     text-align: center;
 } 

2.利用背景

html代码如下：

<div id='imgs'></div>

CSS代码如下:

#imgs {
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url('../img/1.png') no-repeat center;
    background-size: 40px 30px;
 }

二、Vue生命周期

三、VueX中的action和mutation区别

• 流程顺序

  “相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。

• 角色定位

  基于流程顺序，二者扮演不同的角色。
  Action：业务代码、异步请求。
  Mutation：专注于修改State，理论上是修改State的唯一途径。

• 限制角色不同，二者有不同的限制。

  Action：可以异步，但不能直接操作State。
  Mutation：必须同步执行。

四、VueRouter 两种模式以及区别

• hash模式

  hash使用的时候访问链接一般都跟着一个#
  hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件
  hash访问变化的url都会被记录下来，从而可以前进后退。

• history模式

  history Api 提供了三种方法：back forward go，分别对应浏览器的后退、前进、跳转
  history模式，可以把#去掉，但是他有一个问题，就是刷新，因为刷新是从服务器去请求的，在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

五、Vue中父子组件的生命周期

• 加载渲染过程
  父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

• 子组件更新过程
  父beforeUpdate->子beforeUpdate->子updated->父updated

• 父组件更新过程
  父beforeUpdate->父updated

• 销毁过程
  父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

以上是我再一次面试中问及的问题，通过观看各位大牛的博客以及官网，整理出来，如果有任何问题，请及时告知，谢谢。