前端面试题（总结）

这是我总结的一些面试题，有兴趣的可以看看

一、简述Vuex的工作流程

1、在vue组件中，通过dispath来触发actions提交修改数据操作。
2、然后在通过actions的commit来触发mutations来修改数据。
3、mutations接受到commit的请求，就会自动通过Mutate来修改state里的数据。
4、最后由store触发每一个调用它的组件更新

二、vue-router有哪几种导航守卫（钩子函数）

1、全局的
- beforeEach-前置钩子函数
to：去哪 from：从哪来 next()：是否跳转由它决定
使用场景：未登录下单，跳转登录页面
- afterEach-后置钩子函数
to：去哪 from：从哪来 next()：是否跳转由它决定
使用场景：改变浏览器title
2、单个路由独享的
- beforeEnter
3、组件及的
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave

三、详述keep-alive

包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，它自身不会渲染一个DOM元素，也不会出现在父组件链中。

使用keep-alive后会触发多出两个生命周期：
1、activated：来缓存组件状态，页面第一次进入的时候，钩子触发的顺序是created->mounted->activated，之后再进入页面的时候，不会触发created，只会触发activated，也就是activated在这时代替了created。
2、deactivated：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

四、v-show 和 v-if区别

共同点：
v-if 与 v-show 都是动态显示DOM元素
区别：
1、编译过程：v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在DOM中。 v-show只是简单地切换元素的CSS属性display。
2、编译条件：v-if是懒惰性的，如果在初始渲染时条件条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
3、性能消耗：v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
4、应用场景：v-if适合运行是条件很少改变时使用。v-show适合频繁切换。

五、vue中key值的作用

• 需要使用key来给每一个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
• 其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM中的Diff算法了。
• 虚拟DOM对比时，会用到diff算法。
• 当它的数据发生改变时会对比
• 当我们遍历数据时，它会创建一个虚拟DOM，通过key值进行一一对比，对比当中如果相同继续往下对比，如果不相同虚拟DOM会覆盖旧的节点。

六、assets和static的区别

简单回答：
简单的讲，static放别人家的，不会变动，第三方资源（第三方比如jQuery，swiper等），assets方自己写的（自己写js文件等）

• 相同点
  assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下。
• 不同点
  assets中存放的静态资源在项目打包时，所谓的打包理解为压缩体积，代码格式化。压缩后的静态资源文件放置在static文件中跟着index.html一同上传至服务器。
  static中放置的静态资源文件就不会走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。

七、computed和methods的区别

八、computed和watch的区别

九、对MVVM、MVC、MVP的理解

十、vue中组件通信

十一、vue生命周期（keey-alive）

十二、常见的解决跨域的方式

十三、vue-router实现的原理

十四、Vue响应式原理

十五、SPA路由为history刷新404，为什么？如何解决？

十六、swiper获取数据、css都没有问题，但是图片不动，为什么？如何解决？

十七、子组件能不能修改父组件传过来的数据

十八、手写promise封装ajax请求

十九、在地址栏输入网址敲回车发生了什么？

二十、什么是BFC？什么情况下触发BFC

后面慢慢更新，答案等下更新