Vue、react和webpack面试题

移动端适配方案

1、使用JS根据不同设备改变meta标签里的宽度和缩放比例
2、媒体查询
2、使用vw
3、使用rem并且使用JS改变不同设备下根元素的字体大小（或者使用afme-flexible可以自动完成不同设备下根元素字体大小的改变）

pxtorem实现移动端响应式适配

1、在设计图分辨率下计算出元素的大小，如设计图375px宽度下某元素宽度为75px
2、设置rootValue为37.5（一般为设计图宽度的0.1，是设计图分辨率下的根元素fontSize），那么pxtorem会将元素宽度转化为2rem
3、编写js函数，根据设备的屏幕大小来实时改变fontSize值。已知设计图宽度，那么 设计图宽/rootValue = 当前屏幕宽/所求fontSize（可以结合afme-flexible插件，就可以不用编写js函数，因为afme-flexible保证了 当前屏幕宽/所求fontSize = 10，所以我们必须保证 设计图宽/rootValue 也为10，所以一般将rootValue设置为设计图宽度的0.1），fontSize改变后，因为元素大小为2rem，所以实际大小也会跟随fontSize进行改变。

virtual DOM优点

1、跨平台：当需要将相同结构的DOM渲染到不同平台（web、移动端等）时，由于虚拟DOM是对DOM结构的抽象，所以一份代码可以在跨平台下执行，不受不同平台真实DOM差异的影响。
2、性能优化：在diff时操作虚拟DOM比真实DOM更节省性能，实现一次性更新

babel中plugin和presets的区别

1、plugin颗粒度更小，可以把presets看作完成某功能的plugin的集合
2、plugin先顺序加载，presets后逆序加载

webpack中loader和plugin的区别

1、loader加载：仅用于打包，将无法被webpack识别的文件进行转化
由于webpack 本身只能打包commonjs规范的js文件，所以使用loader对css，图片等格式的文件进行转化和翻译
2、plugin：打包优化、压缩等各种功能，如：CommonChunkPlugin主要用于提取第三方库和公共模块，CompressionWebpackPlugin用于压缩等
3、loader无需引入，而plugin需要引入

打包后静态图片资源失效

由于打包后目录结构会改变，所以未被预加载的图片在打包后的请求路径会产生错误，而一开始设置在src属性下的比较小的图片会被预加载，打包后只需转码，所以不会出现路径问题。
解决：使用import预加载大图片然后进行使用

hash和history

1、hash的兼容性更好
2、hash永远不会请求服务端，history在改变url时不会请求服务端，但是history在刷新页面时会请求服务端，路由嵌套时history模式可能无法在服务器上找到资源，因为该路由希望被前端处理。

组件通信

1、父子：props、$ emit、$ children、$ parent、$ root、$ ref、provide/inject
2、兄弟：事件中心（创建一个新的vue实例并挂载到原型上，使用该实例的on和emit来传递数据）
3、vuex适用所有

vue.use()

实际上就是执行了组件内置的install方法，将需要做的配置工作在install内完成，并注册。

vue渲染方式

先判断有无render函数，若有&#