1、active-class 是哪个组件的属性？嵌套路由怎么定义？

vue-router 模块的 router-link 组件

2、怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。 使用 router 对象的 params.id

3、vue-router有哪几种导航钩子？

第一种：全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
第三种：单独路由独享组件

4、scss 是什么？安装使用的步骤是？

预处理css，把css当前函数编写，定义变量,嵌套。 先装 css-loader、node-loader、sass-loader 等加载器模块，在 webpack-base.config.js 配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader

4.1 scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
css的预编译。
使用步骤：
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：还是在同一个文件，配置一个module属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
有哪几大特性:
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器，例如（）
3、可以嵌套

5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

基于vue的前端组件库。
npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。
组件一：Toast(‘登录成功’)；
组件二：mint-header；
组件三：mint-swiper

6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？

可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。
vue 的 model 层的 data 属性。
绑定事件：<input @click=doLog() />

7、axios是什么？怎么使用？描述使用它实现登录功能的流程？

请求后台资源的模块。
npm install axios -S装好，
然后发送的是跨域，
需在配置文件中config/index.js进行设置。
后台如果是Tp5则定义一个资源路由。js中使用 import 进来，然后 .get 或 .post。返回在 .then 函数中如果成功，失败则是在.catch函数中

8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

跨域，添加用户操作，更新操作。

9、什么是RESTful API？怎么使用?

一个 api 的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。
标准有：.post .put .delete

10、vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。
在main.js引入store，注入。新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

一个 model+view+viewModel 框架，数据模型 model，viewModel 连接两个;
区别：vue 数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding

13、说出至少4种 vue 当中的指令和它的用法？

v-if：判断是否隐藏；
v-for：数据循环出来；
v-bind:class：绑定一个属性；
v-model：实现双向绑定

14、vue-router 是什么？它有哪些组件？

vue用来写路由一个插件。router-link、router-view

15、导航钩子有哪些？它们有哪些参数？

导航钩子有：
全局钩子和组件内独享的钩子、beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：
to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

16、Vue的双向数据绑定原理是什么？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：
需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：
compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：
Watcher 订阅者是 Observer和Compile 之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化
视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

答案同样适合”vue data是怎么实现的？”此面试题。

17、请详细说下你对vue生命周期的理解？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后：
创建前/后：
在 beforeCreated 阶段，vue实例的挂载元素el和数据对象 data 都为 undefined，还未初始化。
在 created 阶段，vue实例的数据对象 data 有了，el和数据对象data都为 undefined，还未初始化。
在 created 阶段，vue实例的数据对象 data 有了，el还没有。
载入前/后：
在beforeMount阶段，vue实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。
在mounted阶段，vue实例挂载完成，data.message 成功渲染。
更新前/后：
当 data 变化时，会触发 beforeUpdate 和 updated 方法。
销毁前/后：
在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是dom结构依然存在

18、请说下封装 vue 组件的过程？

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用 Vue.extend 方法创建一个组件，然后使用 Vue.component 方法注册组件。子组件需要数据，可以在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

19、你是怎么认识vuex的？

vuex 可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

20、vue-loader 是什么？使用它的用途有哪些？

解析.vue文件的一个加载器，跟 template/js/style 转换成 js 模块。
用途：JS可以写ES6，风格样式可以SCSS或更少，模板可以加入等。

21、请说出 vue.cli 项目中的 src 目录每个文件夹和文件的用法？

assets 是放静态资源;
components 是放组件;
router 是定义路由相关的配置;图视图;
app.vue 是一个应用主组件;
main.js 是入口文件

22、vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：在组件目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：从’…/components/smithButton.vue’ 导入 smithButton
第三步：注入到VUE的子组件的部件属性上面，组件：{smithButton}
第四步：在模板视图中查看中使用， </ smith-button>
问题有：smithButton命名，使用的时候则smith-button。

23、聊聊你对 Vue.js 的模板编译的理解？

简而言之，就是先转化成AST树，再得到的渲染函数返回 VNODE（Vue公司的虚拟DOM节点）
详情步骤：
首先，通过编译编译器把模板编译成AST语法树（抽象语法树即源代码的抽象语法结构的树状表现形式），编译是createCompiler 的返回值，createCompiler 是用以创建编译器的。负责合并选项。
然后，AST会经过生成（将AST语法树转化成渲染功能字符串的过程）得到渲染函数，渲染的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名，子节点，文本等等）

24、如何让CSS只在当前组件中起作用?

将当前组件的

25、v-show 和v-if 指令的共同点和不同点?

v-show 指令是通过修改元素的 display CSS属性让其显示或者隐藏
v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果

26、< keep-alive></ keep-alive>的作用是什么?

包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
大白话: 比如有一个列表和一个详情，那么用户就会经常执行 打开详情 => 返回列表 => 打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

27、在Vue中使用插件的步骤

采用 ES6 的 import … from … 语法或 CommonJSd 的 require() 方法引入插件
使用全局方法 Vue.use( plugin ) 使用插件,可以传入一个选项对象 Vue.use(MyPlugin, { someOption: true })

28、active-class是哪个组件的属性？

vue-router 模块的 router-link 组件。

29、嵌套路由怎么定义？

{ path: “/”, redirect: “/home” }, // 重定向,指向了home组件
{
path: “/home”, component: home,
children: [
{ path: “/home/game”, component: game }
]
}

30、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在 router 目录下的 index.js 文件中，对 path 属性加上/:id。
使用 router 对象的 params.id。

31、vue-router有哪几种导航钩子？

第一种：全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子
第三种：单独路由独享组件

32、简述一下Sass、Less，且说明区别？

他们是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
变量符不一样，less 是 @，而 Sass 是 $;
Sass 支持条件语句，可以使用 if{}else{},for{} 循环等等。而Less不支持;
Sass 是基于Ruby的，是在服务端处理的，而 Less 是需要引入 less.js来处理 Less 代码输出 Css 到浏览器

33、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

全局定义指令：在 vue 对象的 directive 方法里面有两个参数，一个是指令名称，另外一个是函数。
组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding

34、聊聊你对 Vue.js 的 template 编译的理解？

简而言之，就是先转化成AST树，再得到的 render 函数返回 VNode（Vue的虚拟DOM节点）
具体步骤：
首先，通过 compile 编译器把 template 编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是用以创建编译器的。另外 compile 还负责合并 option。
然后，AST会经过 generate（将AST语法树转化成render funtion字符串的过程）得到 render 函数，render 的返回值是 VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

35、vue.js与 angular.js 的区别？

相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点：
在性能上，AngularJS 依赖对数据做脏检查，所以 Watcher 越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。
AngularJS 的学习成本高，比如增加了 Dependency Injection 特性，而 Vue.js 本身提供的API都比较简单、直观。

36、vue.js 与 react 的区别？

相同点：
React 采用特殊的 JSX 语法，Vue.js 在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
中心思想相同：
一切都是组件，组件实例之间可以嵌套。
都提供合理的钩子函数，可以让开发者定制化地去处理需求。
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不同点：
React依赖 Virtual DOM,而 Vue.js 使用的是 DOM 模板。React采用的 Virtual DOM 会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

37、组件之间的传值通信？

父组件向子组件传值：
1）子组件在props中创建一个属性，用来接收父组件传过来的值；
2）在父组件中注册子组件；
3）在子组件标签中添加子组件props中创建的属性；
4）把需要传给子组件的值赋给该属性
子组件向父组件传值：
1）子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
2）将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
3）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

38、mvvm 和 mvc 区别？

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。

39、vue 的优点是什么？

低耦合：
视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model 变化的时候 View 也可以不变。
可重用性：
可以把一些视图逻辑放在一个ViewModel里面，让很多 view 重用这段视图逻辑。
独立开发：
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
可测试：
界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

40. vue如何实现按需加载配合webpack设置?

webpack 中提供了 require.ensure() 来实现按需加载。
以前引入路由是通过 import 这样的方式引入，改为 const 定义的方式进行引入。
不进行页面按需加载引入方式：import home from ‘…/…/common/home.vue’
进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’)))

41、什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。
也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

42、vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

43、vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

44、第一次页面加载会触发哪几个钩子？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

45、DOM 渲染在 哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了

46、简单描述每个周期具体适合哪些场景？

生命周期钩子的一些使用方法：
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

47、cancas和SVG的是什么以及区别

SVG：
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas：
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

48、请说下具体使用 vue 的理解？

1、使用 vue 不必担心布局更改和类名重复导致的js重写：
因为它是靠数据驱动双向绑定，底层是通过 Object.defineProperty() 定义的数据 set、get 函数原理实现。
2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。
3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。
4、js 的代码无形的规范，团队合作开发代码可阅读性更高。

49、你觉得哪些项目适合vue框架？

1、数据信息量比较多的，反之类似企业网站就无需此框架了。
2、手机web和app应用多端共用一套界面的项目，因为使用 vue.cli+webpack 后的前端目录，非常有利于项目的跨平台部署。

51、怎么理解MVVM模式的这些框架？

1、M就是 Model 模型层，存的一个数据对象。
2、V就是View视图层，所有的 html 节点在这一层。
3、VM就是ViewModel，它通过 data 属性连接 Model 模型层，通过el属性连接 View 视图层。

52、PC端项目你会在哪些场景使用Vue框架？

上万级数据需要瀑布流更新和搜索的时候，因为数据庞大的时候，用原生的 dom 操作 js 和 html 都会有列表的 html 布局，迭代很困难。再一个dom节点的大面积添加会影响性能。
那么vue为什么解决这些问题呢？
第一：只需用 v-for 在view层一个地方遍历数据即可，无需复制一段 html 代码在 js 和 html 两个地方。
第二：vue 通过 Virtual Dom 就是在 js 中模拟 DOM 对象树来优化 DOM 操作。