笔者是在郑州，算不上什么互联网大城市，之前学的是java，第一份工作也是java，但是java对我来说可能太难了吧，那个时候还比较小，也不知道努力，也不知道自学，16年实习的时候是去得深圳，面试了一个多月，没有结果，然后后来，通过亲戚去了广州，再后来在郑州一个亲戚说，他能帮我搞个好工作，然后兴冲冲的回到了郑州，然后结果也是我太菜了。。人家也没相中，所以啊，有时候机会就在你面前，你自己抓不到，怨不得谁，后来想想还是在郑州吧，然后面试了俩月，去了郑州第一家公司，然后，刚开始也是java，只不过后来因为java太菜，技术总监和老板人也比较好，技术总监让我转了前端，刚开始接触的第一个框架是layui，哈哈，当时感觉前端真tm难，还记得技术总监因为我一个星期啥都没干出来，天天留我到11点的时候，天天怼我，那段时间前端技术也算入门了，后来就开始自学了，目前掌握的技术有vue react angular uniapp flutter jquery ionic egg koa2等等，闭门学习工作两三年，前一阵子的面试也算是面一家过一家吧，我相信也是有很多和我一样的小伙伴需要这些常见的面试题的。

看一看最近的比较火热的面试题，了解现在公司都在面什么类型的题，准备一些常见的题，自己去熟悉熟悉。把你写在简历上的的项目从技术架构到源码都要做到足够了解，至少面试的时候不要被面试官问住了准备一些自己的亮点，因为面试的问题你不可能每个都回答上来，但是在面试的过程中一定要有亮点，不要让让面试官感觉不到你那方面比较擅长，我面试写了十页简历，有点蠢，有些面试官捧着厚厚的简历有点崩溃，有的会说你这项目做的有点多啊，小伙子有点东西。先找几家不太想去的公司，规模差不多但离你住的地方比较远等等原因，先练练手，如果第一次面试就去心仪的公司面试，淘汰率会非常高。心态很重要！！！面试不过很正常，不证明你不优秀，只是不适合，总结面试经验，为下一次做准备。

下面是还能记住的一些面试题

vue相关1、Vue实例的生命周期讲一下

Vue实例从创建到销毁的过程，就是生命周期。

开始创建->初始化数据->编译模板->挂载dom->数据更新重新渲染虚拟dom->最后销毁。 这一系列的过程就是vue的生命周期。所以在mounted阶段真实的DOM就已经存在了。

beforeCreate：vue实例的挂载元素el和数据对象data都还没有进行初始化，还是一个undefined状态created: 此时vue实例的数据对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂载dombeforeMount: 在这里vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点mounted: vue实例已经挂在到真实的dom上，可以通过对dom操作来获取dom节点beforeUpdate: 响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的dom，比如手动移除已添加的事件监听器updated: 虚拟dom重新渲染和打补丁之后调用，组成新的dom已经更新，避免在这个钩子函数中操作数据，防止死循环。beforeDestory: vue实例在销毁前调用，在这里还可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。destoryed：vue实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。2、Vue中的的通信方式有几种？隔代组件的通信你用那种方式解决？

当时只答了四种，ref props vuex slot

props/$emit 适用父子组件通信ref与children适用父子组件通信EventBus(事件总线) 适用于父子、隔代、兄弟组件通信listeners 适用于隔代组件通信provide/inject 适用于隔代组件通信vuex 适用于父子、隔代、兄弟组件通信slot插槽方式3、Vue中的常见指令

这就比较简单了，一般问到这里的时候会问v-if和v-show

4、谈谈你对vuex的理解

vuex是一个专门为vue.js开发的状态管理模式，每一个vuex应用核心就是store(仓库)。store基本上就是一个容器，它包含着你的应用中大部分的state(状态)

vuex的状态存储是响应式的，当vue组件中store中读取状态时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。改变store中的状态的唯一途径就是显示commit(提交)mutation，这样使得我们可以方便地跟踪每一个状态的变化。

主要有以下几个模块：

State: 定义了应用状态的数据结构，可以在这里设置默认的初始状态Getter: 允许组件从Stroe中获取数据，mapGetters辅助函数仅仅是将store中的getter映射到计算属性。Mutation: 唯一更改store中状态的方法，且必须是同步函数。Action: 用于提交muatation, 而不是直接变更状态，可以包含任意异步操作。Module: 允许将单一的store拆分为多个sotre且同时保存在单一的状态树中

到这里可能会问vuex在刷新页面之后还会存在吗？该怎么解决vuex刷新状态丢失的问题？

4、v-bind和v-model的区别， v-model原理知道吗？v-bind用来绑定数据和属性以及表达式v-model使用在表单中，实现双向数据绑定的，在表单元素外不起使用。

v-model原理：我们在vue项目中主要使用v-model指令在表单 input、textarea、select、等表单元素上创建双向数据绑定， v-model本质上就是vue的语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text和textarea元素使用value属性和input事件checkbox和radio使用checked属性和change事件slect字段将value作为prop并将change作用事件

<input v-model="something">//本质上相当于这样<input v-bind:value="something" v-on:input="something = $event.target.value">//其实就是通过绑定一个something属性，通过监听input事件，当用户改变输入框数据的时候，//通过事件传递过来的事件对象中的target找到事件源，value属性表示事件源的值，从而实现双向数据绑定的效果

mvc

M - Model：模型，是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据V - View: 视图，是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的。C - Controller: 控制器, 是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

流程

View 接受用户交互请求View 将请求转交给Controller处理Controller 操作Model进行数据更新保存数据更新保存之后，Model会通知View更新View 更新变化数据使用户得到反馈

mvvm

M - Model，Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View

流程

View 接收用户交互请求View 将请求转交给ViewModelViewModel 操作Model数据更新Model 更新完数据，通知ViewModel数据发生变化ViewModel 更新View数据。

概括起来就是，MVVM由MVC发展而来，通过在Model之上而在View之下增加一个非视觉的组件将来自Model的数据映射到View中。

6、Vue中的组件data为什么必须是函数

因为组件是可以复用的，js里对象是引用关系，如果组件data是一个对象，那么子组件中的data属性值会互相污染，产生不必要的麻烦。所以一个组件中的data必须是一个函数，因此每个实例可以维护一份被返回对象独立的拷贝。也因为new Vue的实例是不会被复用，所以不存在以上问题。

7、vue的组件化及好处，请说下封装 vue 组件的过程？

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

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

8、vue与其它框架对比的优势和劣势？

Vue 最大优势就是它比较新颖，没历史包袱，它吸取了 React 和 Angular 的教训Vue轻量级，易上手，易学习Vue更加灵活，（比起 Angular）更少专制组件（Component）是 Vue最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码vue3更优的性能和更优雅的代码其他1、防抖节流

这个笔者在上篇文章有单独解释

2、cookie、SessionStroage、LocalStroage这三者的区别

存储大小

Cookie4K, Stroage5M

存储有效期

Cookie有有效期的限制，而Storage没有，sessionStorage只在窗口关闭会消失 LocalStorage始终有效即使浏览器关闭也有

作用域不同

sessionStorage不在不同的浏览器窗口共享，即使是同一个页面，LocalStorage在所有同源窗口中都是共享的，cookie也是在所以同源窗口共享

3、对于http请求有了解过嘛？常见的状态码都有那些？405是什么？200 OK 成功(最理想的状态)301 Moved Permanently 永久转移（永久重定向）302 Move temporarily 临时转移304 Not Modified 设置缓存400 Bad Request 请求参数错误401 Unauthorized 无权限访问404 Not Found 找不到资源(最不理想的状态)405 Method Not Allowed 请求行中指定的请求方法不能被用于请求相应的资源，但是该响应必须返回一个Allow头信息来表示出当前资源能够接受请求方法的列表。500 Internal Server Error 未知的服务器错误503 Service Unavailable 服务器超负荷

2xx状态码一般是前端人员的锅，5xx一般是后台人员的锅，学会看问题出在哪里很重要，对以后工作中的甩锅有很大帮助。

4、原生Ajax和axios的区别，Ajax怎么发送http请求的？

原生Ajax是根据 XMLHttpRequest发HTTP请求，而axios是根据Ajax进行封装的插件，其内部利用Promise实现，很好的解决的异步请求回调地狱的问题。

后者的问题其实就是问Ajax发送请求的五个步骤，这个过于基础就不讲了。

5、get请求和post请求有什么区别？？

get

一般用于获取数据基于URL地址传参，所以有个长度限制(一般在8KB左右)，如果超过就会被截掉因为GET请求基于问号传参容易被劫持，所以相对不安全。会产生不可控制的缓存，POST不会

post

一般用于新增数据基于请求传参，理论上没有任何限制(真实项目中会自己做大小限制，防止上传过在信息导致请求迟迟完不成)PSOT请求基于请求主体传参，相对来说不好被劫持，比较安全6、http和https有什么区别？

这个问题要回答起来能回答半个小时，每个人回答的方向不一样。

我的回答是：HTTP为超文本传输协议，HTTPS为安全超文本传输协议，后者是前者的升级，相对比较安全，通过数据加密传输的方式，安全系数比较高，HTTPS也会作为网站的搜索权重指标，所以HTTPS的网站在排名中也更有优势。

7、常见布局有几种方式？弹性布局(rem/em)栅格化布局百分比布局浮动布局...8、rem和em有区别嘛? 1em等于多少像素

rem和em单位一样，都是一个相对单位，不同的是em是相对于元素的父元素的font-size进行计算，rem是相对于根元素html的font-size进行计算。

1em相当于当前元素父元素的font-size

<style>    .box {        font-size: 18px;    }    .box .children {        width: 2rem; // 相当于2 * 18 = 36px    }</style><div class="box">    <span class="children">里面</span></div>

创建版本库：

- git clone

- git init

查看配置

git config -l // 查看全部

git conig --global -l // 查看仓库中人员名和邮箱

git config user.name xxx // 设置

git config user.email xxx // 设置

修改和提交

git status

git diff // 查看变更内容

git add .

git mv

git rm

git commmit -m

查看提交历史

git log

git log <file> // 查看该文件每次提交的记录

分支操作

git branch // 查看当前分支

git checkout -b // 添加一个新分支并切换过去

远程操作

git remote -v // 查看远程分支

git remote add <remoteURL> // 添加远程分支

最后说了下我管理库的方式：

首先我会在gitHub上创建一个仓库，为当前项目中每位开发人员取一个对应的分支，让其在对应的分支开发。

然后clone我这个仓库。

当队员需要向gitHub上传代码时，需要先将自己的代码同步到自己远程仓库对应的分支中，

再切换到要本地的主分支将自己本地开发的分支代码进行合并，如果有冲突先在本地解决，

最后再同步到远程的主分支

笔者是自学的前端，能体会到自学路上那种时而迷茫时而充满希望的滋味，希望和我一样自学的前端小伙伴能够坚持下去，刚把得，祝大家早日拿到心仪的offer！！