前端面试总结(2020精华题）

前言：

公司如何招到合乎老板心意的前端开发工程师。个人又是如何能够找到心动的企业呢？会解决问题能够培养你独立解决的能力，能提出独树一帜的问题能给人耳目一新的感觉。

正文：

今天我们团队的伙伴面试了一个自称是五年开发经验的人员，但满意程度确实很低。究竟问了些啥？我们一起巩固一下

1.git

首先很多人用过git,git的问法可大可小，可多可少。git也是一个检查面试者是刚刚培训出来的还是真的有工作经验（但是不能保证有几年工作经验）。

常用的git命令：

git init(创建仓库)
git status(查看仓库的状态)
git diff 文件名 (这次相较上次修改了哪些内容)
git add 文件名 (将添加的文件放到本地暂存区中)
git commit (将栈存区内容提交到代码区中)
git clone git地址(将远程仓库的代码克隆到本地)
git branch 查看当前分支
git checkout 切换分支
git rm <file> # 从版本库中删除文件
git reset <file> # 从暂存区恢复到工作文件
git pull # 抓取远程仓库所有分支更新并合并到本地
git push -f origin develop 强制提交

(1)、SSH秘钥

1、生成一组SSH秘钥

ssh-keygen -t rsa -f ~/.ssh/id_rsa -P '' -C "你的[email protected]"

2、使生成的私钥生效

ssh-agent bash && ssh-add  ~/.ssh/id_rsa

3、使用下述命令查看公钥，然后在GitLab上，个人设置里，添加SSH的公钥

cat ~/.ssh/id_rsa.pub

4、验证秘钥可用性

ssh [email protected](替换为你的GIT服务器地址)

（2）、首次提交代码（刚刚被拉进新项目）

//以下是首次提交 
git init
git add .
git commit -m "描述"
git remote add origin 远程git分支地址
git pull origin master
git push origin master

（3）、更新远程库代码：

//修改后上传
git add -A
git status
git commit -m "描述"
git status
git remote -v
git push origin master

（4）、克隆一份代码：

git clone 远程url

（5）、git回滚

如果一不小心提交失败，就可以使用git回滚命令，回滚到上次提交代码之前

git reset --hard HEAD^           回退到上个版本

git reset --hard HEAD~3          回退到前3次提交之前，以此类推，回退到n次提交之前

git reset --hard “提交id名”      每次提交都会对应唯一的commit id（版本号），git中可以查        
                                  到，当然，也可以 git log 查到。

（6）、git撤销

git add后撤销：

git reset HEAD .             //撤销所有add文件
git reset HEAD -filename     //撤销单个add文件

git commit后撤销：

git push后撤销：

git merge 撤销：

建议查看：

https://www.cnblogs.com/songgj/p/8965580.html

https://blog.csdn.net/weixin_38676357/article/details/81333015

（7）git push完后发现远程地址不对，提交不成功，及时修改git远程地址：

2.vue

vue.js是一套构建用户界面的渐进式框架。

这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念.

那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作,但是,如果任务量很大的情况下,代码会随着业务的增加而变得臃肿和混乱,在现实的开发中,负责的逻辑和巨大的开发量,是原生js无法完成的.

这个时候,开发人员将js代码分为了三个板块,数据(Model),逻辑控制(*),视图(View),数据板块只负责数据部分,视图板块负责更改样式,逻辑控制负责联系视图板块和数据板块,这样子有很大的好处,当需求发生变动时,只需要修改对应的板块就好。

3.v-modle的原理:

vue中的双向数据是通过数据劫持(Object.defineProperty())结合发布者-订阅者模式来实现的。

简单的来说，通过Object.defineProperty对监听的每一个属性设置get 和 set 方法。

4.vue-router 和嵌套路由

嵌套路由就是路由里面嵌套他的子路由

子路由关键属性children

每一个子路由里面可以嵌套多个组件

子组件又有路由导航和路由容器

<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>

还有一点是正则匹配（正则匹配可以简化很多if繁琐的代码）。

5.vue组件传值

父传子：props

子传父：this.$emit

兄弟之间：bus函数

6.vue的源码

GitHub上面下载vue的源码（https://github.com/vuejs/vue）

7.ref和refs

ref 被用来给DOM元素或子组件注册引用信息，引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。

8.对可视化了解多少？svg熟悉吗？

详情：最火Web前端组态软件(可视化)

9.原生js是什么水平

框架解决不了的原生都能解决，原生的也是可大可小。有些项目当前流行的框架根本用不了的时候，你只能用原生去开发了。

10.项目解决冲突的办法

找到冲突的文件，并对比冲突的地方，仔细查看代码。

在这里推荐一个代码文件比较的工具，Beyond，如下图：

11.在项目上如何应用修改之后的element代码

这个还是你真的去接触element源码并修改后多出用到组件才会体会。

感悟：

你只有用尽全力，才可以看起来毫不费力！