前端面试题（项目细节）

1、在项目中有没有单独封装过组件？

有的，在项目的common文件下会存放项目公用组件（如：页面的头组件、页面底部组件等）项目里的feature文件下则是放项目的功能组件（轮播图、分页器、模态框这些功能组件）把这些页面重复的部分抽离出来进度单独的封装，有效减少代码量，提升了项目的开发效率。解决了传统项目中效率低、难维护、复用性低等问题。

2、在项目中发送请求怎么携带token？

 当用户登录时，后端会把用户的信息和token返回给我们，我们将t用户信息和oken进行存储在状态管理库中，在axios二次封装中的请求拦截器中将token取出添加到config请求头上携带传给服务器。

3、 工作中有用到git吗？

有的，在之前的公司，基本上用的都是git进行多人开发，git是一个分布式版本管理工具，首先是获取项目：先创建自己的项目文件夹，右键git bash here，访问远程仓库复制项目链接，git clone带上项目链接地址，将项目克隆到你的文件夹下，就成功地拉取了项目。

然后使用 git init 命令把目录变成git可以管理的仓库，进行开发，

开发完成后，使用 git add . 将文件都添加到暂存区里面去，

再使用 git commit -m '提交说明' 把文件提交到本地仓库，

先使用 git pull 拉取远程仓库代码，避免远程仓库与本地代码不一致时发生冲突

再 git push 把本地仓库的代码提交到远程仓库

还有些其他命令 

        git checkout <分支名称> 可以切换其他已有的指定分支，

        git branch可以查看分支

        git merge将子分支代码合并到主分支代码仓库里 等等

4、git版本发生冲突你是怎么解决的？

版本冲突基本出现在合并操作中（合并远程仓库代码或者合并分支代码）。如果出现版本冲突，需要与同事们一起商量，具体分析出现冲突的代码区，手动进行代码合并，然后再进行提交。

5、首屏加载白屏怎么进行优化？

1、使用CDN减小代码体积，加快请求速度；

2、通过SSR服务端渲染，把所有数据全部渲染完成后，再返回给客户端；

3、路由懒加载，当用户访问的时候，再加载相应模块；

4、使用外链CSS，JS文件；

5、项目打包不生成.map文件；

6、使用骨架屏，在首页加载时，显示页面结构轮廓

6、路由传参 query 和 params 区别?

query类似get，（ /router1?id=123 ）        

        参数会拼接到地址栏中显示，数据不会丢失；

params类似post，（  /router1/:id ，其中id叫做params ）

        参数不会显示在地址栏，相对于query传参比较安全，但是有一个Bug，就是当你传参过去后，参数保存在内存中，再次刷新页面or跳转到其他页面时参数会丢失。

        所以params传参时， params是路由的一部分，必须要有。

其次，

        页面跳转时, 使用name和path方式跳转都可以用query来传参， 使用name方式跳转只能用params传参。 

接收参数

        使用$route.params，$route.query

7、你是怎么理解vuex的？

是vue开发的单向数据流状态管理工具。vuex就是相当于是一个大仓库用来存储数据，可以实现组件间数据共享；也是组件通信的一种，适用于任意组件间的通信； 

Vuex有5种属性：

（1）state  仓库存储共享、响应式数据的地方，可在任意组件调用，写法类似data；

（2）getters  在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)；

（3）mutations  唯一修改公共数据的地方，mutations是数据可预测化（发布订阅机制）的核心；其内部必须是同步函数（因为要等到数据修改更新完成后才能执行其他的）；

（4）actions  可以包含任意异步(例如ajax请求)操作

action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据

（5）modules  用于实现vuex模块化

9、项目基础优化？

1、减少HTTP请求数（避免重复请求）

2、减少DOM元素和DOM操作 

3、使用雪碧图

4、压缩合并JS、CSS代码

5、避免图片src为空

6、把样式表放在link中

7、css样式放置在文件头部

8、js脚本放置在文件末尾

10、对$nextTick异步渲染的理解？

Vue采用了数据驱动视图的思想，但是在一些情况下，仍然需要操作DOM。有时候，DOM1的数据发生了变化，而DOM2需要从DOM1中获取数据，那这时就会发现DOM2的视图并没有更新，这时就需要用到nextTick了；

作用：

        在下一次DOM更新结束后执行其指定的回调；（当数据更新后，要基于更新后的新DOM进行某些操作时，要在nextTick指定的回调函数中执行）。如果不采用异步更新，在每次数据更新后，都会对当前组件进行重新渲染，所以为了性能考虑，vue会在本轮数据更新后，再去异步更新视图。