vue.js面试题整理2

1、vue与react的对比,如何选型？从性能，生态圈，数据量，数据的传递上，作比较

（1）React 和 Vue 有许多相似之处，它们都有：

使用 Virtual DOM

提供了响应式（Reactive）和组件化（Composable）的视图组件。

将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。

（2）性能：

到目前为止，针对现实情况的测试中，Vue 的性能是优于 React 的。

（3）生态圈

Vue.js: ES6+Webpack+unit/e2e+Vue+vue-router+单文件组件+vuex+iVew

React: ES6+Webpack+Enzyme+React+React-router+Redux

（4）什么时候选择Vue.js

如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue

如果你喜欢简单和“能用就行”的东西，请使用Vue

如果你的应用需要尽可能的小和快，请使用Vue

如果你计划构建一个大型应用程序，请使用React

如果你想要一个同时适用于Web端和原生App的框架，请选择React

如果你想要最大的生态圈，请使用React

<figure class="section img" style="box-sizing: border-box; word-break: break-all; word-wrap: break-word; margin: 20px 0px 0px; padding: 0px; line-height: 28px; color: rgb(51, 51, 51); font-family: "Hiragino Sans GB", "Helvetica Neue", Helvetica, STHeiTi, "Microsoft Yahei", sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: block;">[ image

](javascript:;) </figure>

2、vue slot是做什么的?

简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

3、vue和angular的优缺点以及适用场合?

参见：《在选择框架的时候要从哪方面入手》一题

4、vue路由实现原理?

以官方仓库下 examples/basic 基础例子来一点点具体分析整个流程。

和流程相关的主要需要关注点的就是 components 、 history 目录以及 create-matcher.js 、 create-route-map.js、index.js 、 install.js。

从入口，作为插件，实例化 VueRouter，实例化 History，实例化 Vue，defineReactive 定义 _route，router-link 和 router-view 组件等几个方面展开分析

5、你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

6、vue遇到的坑，如何解决的？

Vue1.0升级2.0有很多坑: 生命周期；路由中引入静态js，全局组件，全局变量，全局function；v-for循环的key，value值互换了位置，还有track-by；filter过滤器；遍历数组时，key值不能做model；父子通信等。

7、vue的双向绑定的原理，和angular的对比

在不同的 MVVM 框架中，实现双向数据绑定的技术有所不同。

AngularJS 采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

VueJS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

8、vue-cli，脚手架

安装：$ npm install -g vue-cli

使用：$ vue init

9、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill 插件解决。