面试

Vue常见面试问答

1.说说你对Vue的理解？

vue是尤雨溪于2014年发布，通过数据驱动，组件化开发，支持指令的一套开发web应用开源框架。

2.Vue和React有什么异同？

相同点：

1. 数据驱动视图
2. 虚拟dom
3. 组件化开发
4. 服务端渲染
5. APP开发

不同点：

1. 数据流向不同：vue双向数据流，react单向数据流。
2. 数据变化的实现原理不同：vue使用的是可变的数据，react使用的是不可变的数据。
3. 组件间通信的方式不同：vue通过事件和回调函数，react通过回调函数。
4. diff算法不同：vue使用双向指针，边对比边更新dom，react主要通过pitch树批量更新dom。

3.说说你对Vue双向数据绑定的理解？

Vue双向数据绑定是通过数据劫持结合发布者订阅者模式实现的，其大致实现流程如下：new Vue()初始化实列时在监听器（Observer）中对data中的每个数据属性进行监听（即通过Object.defineProperty()进行数据劫持），然后在解析器（Compiler）中，对每个元素节点的指令进行扫描解析，在data中找到对应的数据替换指令，同时绑定对应的更新函数和watcher，watcher由Dep管理，有数据变化时对应Dep通知watcher调用更新函数更新视图，视图变化时解析器通知watcher，watcher通知Dep重新订阅对应数据和更新函数。

4.说说你对SPA的理解？

SPA（单页面应用程序）是通过重写当前页面和用户交互，避免多页面切换的一种网络应用程序或者网站模型。

5.如何对SPA进行SEO?

1. 服务端渲染：通过服务器将组件或者页面渲染后返回用户。
2. 动态页面静态化：动态页面通过静态服务器转化为纯html文件，而后分发到web服务器，缺点就是html文件过多。
3. 动态页面伪静态化：nginx对外部请求url按照一定规则rewrite为web服务器上的文件地址，web服务器上的文件地址指向动态页面生成html文件的缓存服务器地址。
4. 布局样式模板化：用户 —> 分发层nginx —> 应用层nginx (http模板+缓存+lua脚本=>网页模板)。

6.如何优化SPA首屏加载时间（性能优化）？

1. 对于网络请求缓慢的：合理设计/调用接口请求（避免重复多次调用），慢sql优化，服务端渲染。
2. 对于加载资源过大的：通过路由懒加载减少入口文件，合理设置浏览器缓存，UI组件/第三方插件按需加载，图片资源icon通过精灵图方式加载，开启Gzip压缩。

7.说说Vue的生命周期？

1. 组件实例创建前后（beforeCreate/created）
2. 组件挂载前后（beforeMount/mounted）
3. 数据更新前后（beforeUpdate/updated）
4. 组件实例销毁前后（beforeDestroy/destroyed）
5. keep-alive组件激活前后（activated/deactivated）

8.Vue组件间的通信方式有哪些？

1. 父子组件间通信：props（父->子），$emit 触发自定义事件（子->父），使用 $ref（子->父），使用$parent(父->子)。
2. 兄弟组件间通信：EventBus（中央时间总线）。
3. 祖先给子孙组件传值：使用$root(祖先 -> 子孙)，$arrts，$emit，provide 和 inject。
4. 复杂组件间传值：Vuex。

9.说说v-show和v-if的区别？

v-show是基于css样式的控制显示和隐藏（display: none|block）
v-if 是基于dom的渲染与否控制元素的显示和隐藏
v-if 的性能开销要比v-show的大，所以频繁切换显示隐藏的元素建议使用v-show

10.说说你对vue diff算法的理解？

深度优先，同级比较
循环从两边向中间比较

11.vue为什么要在列表组件中写key?

列表组件中的key会成为vnode中的唯一的id，是一种diff算法的优化策略，查找vnode更快速，跟方便。

12. vue项目中修改UI框架中的样式？

原因：使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。（防止父组件的样式影响子组件，UI框架时子组件）
解决办法：
（1）深度渗透

<template>
  <div id="app">
    <el-input  class="text-box" v-model="text"></el-input>
  </div>
</template>
<!-- 正常写法 -->
<style lang="less" scoped>
.text-box {
   input {
    width: 166px;
    text-align: center;
  }
}
</style>
<!-- 深度渗透 -->
<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>

详见Scoped CSS