vue面试题

1.vue中的SPA应用如何优化首屏加载速度

可以使用:请求优化、缓存、gzip打包、懒加载、预渲染、使用可视化工具分析打包后的模块体积、图片懒加载，svg图标，封装，按需导入第三方库，压缩图片

2.移动端如何实现一个比较友好地header组件

header组件一般可以分为：左、中、右三个部分，分为三个区域来设计。中间为主标题，每个页面的组标题肯定不同，所以使用vue props的方式做成可配置的，对外进行暴露；左边大部分组件一般都是回退按钮，右边一般都是具有功能性的操作按钮，所以可以使用vue slot插槽来实现外部暴露，达到多样化，还可以提供defult solt默认插槽统一页面风格

3.既然Vue通过数据劫持可以精准探测数据变化，为什么还需要虚拟DOM进行diff监测差异

现代前端框架变化侦测的方式主要有pull和push
pull:
pull的代表框架是React
push:
Vue的响应式系统侦测变化的方式是push，vue程序初始化时就会对数据data进行依赖的收集，一旦数据发生变化，响应式系统就会立刻知道，因此vue在刚开始就知道在哪发生了变化
但是会产生一个问题，通过响应式绑定的数据都会有一个Watcher，一旦我们的绑定细粒度过高，就会有大量的Watcher，这会带来内存和依赖追踪上的开销；细粒度过低又会无法精准侦测变化，所以Vue的设计选择中等绑定细粒度的方案，在组件级别进行push侦测的方式，也就是那套响应式系统
通常在一开始时我们就知道发生变化的是哪个组件，然后用Virtual Dom Diff进行具体的差异检测，因为Virtual Dom Diff是pull的操作，所以Vue采用的是pull+push的方式侦测变化

4.Vue为什么没有类似React中shouldComponentUpdate的生命周期

主要原因:Vue和React的侦测变化的方式有所不同

React采用的是pull的方式，当React知道发生变化了之后，会使用Virtual Dom Diff进行差异检查,但是很多组件肯定不会发生改变，这个时候就需要使用shouldComponentUpdate进行手动操作来减少diff，以提升程序的性能
Vue则是采用pull+push的方式侦测变化，它在一开始就知道哪些组件发生了变化，所以不需要手动减少diff，并且，在内部组件可以添加手动减少diff类似的shouldComponentUpdate生命周期的。但是合理大小的组件不会有过量的diff，手动优化的价值有限，所以Vue目前不考虑引入此生命周期

5.Vue中的Key的作用是什么？

key的作用主要是为了更高效的更新虚拟Dom，在Vue中使用相同标签名元素的切换过渡时，也会使用到key的属性，用以区分它们的组件