1. 什么是vue.js？
Vue是一个MVVM（Model-View-ViewModel）模型的前端JS框架。Model本质上来说就是数据，View就是视图（即最终展现给客户的页面）。MV（从Model到View）是由数据驱动视图，而VM（从view到model）则是由视图通过事件更新数据。
Vue的另一个特点是组件化开发，Vue可以把界面分割成多个组件（Component），每个组件可以包含自己的视图、数据、属性和事件，可以独立开发，独立测试，于是复杂的界面就可以分割成许多简单的部件来实现，从而把应用的复杂度降下来。
此外Vue还是渐进式的框架，使用者可以根据需要只引入所需要的部分，Vue容易上手，生态组件齐全，是轻量级（相对AngularJs,RectJs...）的前端框架。
2. 什么是MVVM？
Model代表数据模型，数据和业务逻辑都在Model层中定义；View 代表界面视图，负责数据的展示；ViewModel则负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作。
Model和View 并无直接关联，而是通过ViewModel 来进行联系的。Model 和View之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护即可，而不需要自己操作 DOM。
3. Vue的优点是什么？
（1）双向数据绑定：通过MVVM思想实现数据的双向绑定，让开发者不用再操作DOM对象，集中精力去处理业务逻辑；
（2）组件化开发：充分利用面向对象原则，把各种模块（界面、功能）拆分到一个个独立的组件（Component）中，单独封装，单独测试，把复杂问题分解成若干简单问题。
（3）虚拟DOM（Virtual DOM）技术：
通过Model生成View时，并不直接重生成所有DOM，而是预先通过JS进行计算比较，在内存中生成虚拟的DOM树，把新版本的虚拟DOM和原来的虚拟DOM比较，得出差异，最终只更新差异部分的实际DOM元素。
（4）渐进式、轻量高效：
渐进式是指在使用Vue开发时，不需要使用Vue的全家桶，而是根据需要选择自己所需要的部分技术；此外Vue提供的API也比较简洁，执行效率也很高。
4. v-if 和 v-show有什么区别？
v-show 仅仅控制元素的显示方式，也就是控制CSS中的display 属性在block 和none 来回切换；而v-if会控制这个 DOM 节点的存在与否。
当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。
5. 简述Vue的响应式原理
当一个Vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher（监视器）对象，它会在组件渲染的过程中把属性记录为依赖项，之后当依赖项的setter 被调用时，会通知 watcher 重新计算，从而导致它所关联的组件得以更新。
6. Vue中如何在组件内部实现一个双向数据绑定？
Vue对表单input类元素都提供了双向绑定属性：v-model。v-model一方面帮我们把model数据传入到input的value属性上，另一方面在input输入发生变化时把value值反向修改到我们的model上。
如果要自定义双向绑定机制，则在父组件通过props 传值给子组件，子组件则通过$emit来通知父组件修改相应的props值。我们在父组件中做了两件事，一是给子组件传入props，二是监听事件并用子元素的变化更新父元素传入props的模型数据。
7. 如何让CSS只在当前组件中起作用
将当前组件的<style>修改为<style scoped>
8. Vue路由如何实现跳转
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，路径之间的切换实际上是组件之间的切换。其实现方式有：
（1）声明式（标签跳转）
<router‐link to="/login">登录</router‐link>
<router‐link:to="{name:'cart'}">购物车</router‐link>
（2）编码式：this.$router.push({name:’cart’})
9. 组件之间如何传值？
Vue中经常需要在父组件与子组件之间传值。组件之间通过组件（标签）上面定义的属性传值，子组件通过props方法接受父组件传入的数据；子组件向父组件传递数据则要通过$emit方法引发事件并向父组件传递事件参数。
10. MVVM和MVC区别？Vue和其它框架（jQuery）的区别是什么？哪些场景适合？
MVC和MVVM区别并不大，都源自同一种设计思想。其最主要的区别就是MVC中Controller演变成MVVM中的ViewModel。MVVM主要解决了MVC中大量的DOM的操作使页面渲染性能降低，加载速度变慢。
jQuery是上一代的JS技术框架，主要是通过操作DOM来实现页面的更新，代码需要根据模型对象的变化来执行DOM的修改，不仅代码繁琐，性能还低下。Vue是通过MVVM来刷新界面的，模型对象的变更会触发虚拟DOM的重新生成，并自动更新实真实要变更的少量DOM元素，这个过程都是由框架实现的，不仅代码简洁，性能还有质的飞跃。
11.Vue-cli中怎样使用自定义的组件?
(1)在components目录添加你的自定义组件(如Header.vue)，在JS中封装组件并导出：
export default { … }
(2)在父组件中（使用组件）中导入子组件：
import Header from '@/components/Header.vue'
(3)在父组件中注册需要使用的子组件：
export default { components:{Header} … }
(4)在template视图中使用子组件
<header></header>
12. 讲述Vue的组件生命周期（vue的钩子函数）
Vue组件从创建到销毁整个过程中不同时机会引发不同的事件，我们可以使用钩子函数在对应的事件中添加处理代码，这些组件不同时机引发的钩子事件称为“Vue组件生命周期”。
beforeCreate 组件还未被创
created 组件已被创建
beforeMount 组件已被创建但还未挂载到DOM节点上
mounted 组件已挂载到DOM节点上
beforeDestory 组件即将被销毁
destoryed 组件已经被销毁
13.Vue的双向数据绑定原理是什么？
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter,在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤:
(1)需要observe的数据对象进行遍递归历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter；
(2)compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加数据的订阅者，一旦数据有变动，收到通知，更新视图；
(3)Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：
在自身实例化时往属性订阅器（dep）里面添加自己。自身必须有一个update()方法待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退；
14. vue.cli项目中目录中src目录每个文件夹和文件的用法？
· assets文件夹是放静态资源；
· components是放组件；
· router是定义路由相关的配置；
· view视图；
· app.vue是一个应用组件；
· main.js是入口文件；
15. axios 是什么？怎么使用？描述使用它实现登录功能的流程？
答：axios是一个基于Promise实现的nodejs的异步请求客户端API，它本身具有以下特征。
(1) 封装浏览器中的XMLHttpRequest对象；
(2) 发出 http 请求；
(3) 支持 Promise API，解决回调函数的嵌套问题；
(4) 提供拦截器，拦截请求和响应实现统一处理；
(5) 提供请求和响应数据的转换；
(6) 自动转换JSON数据
(7) 客户端支持防止CSRF/XSRF
使用方式:
npm install axios -s
axios.get(‘/user/login,this.user).then(res=>{…登录成功…}).catch(err=> { …登录失败…})
16. vue组件化的理解
组件的基本构成分别为：样式结构，行为逻辑，数据。web 中的组件其实就是页面的一部分，每个组件都会提供一些对外的接口，允许使用者使用和设置参数属性，可以将不同功能的组件结合在一起，快速的构建一个符合需求的引用。
17.created 和mounted 的区别
created 是实例创建完成之后的钩子函数；在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted是将编译好的HTML挂在到页面完成后执行的钩子函数，在整个生命周期中只执行一次；在模板渲染成html后调用，通常是初始化页面完成后，再对html的DOM节点进行一些需要的操作。只需实现AJAX请求时，使用 created ；如果需要获取或修改DOM的情况下，就应该 mounted。
18.前端如何优化网站性能？
1）减少 HTTP 请求数量
在浏览器与服务器进行通信时，主要是通过HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少HTTP 的请求数量可以很大程度上对网站性能进行优化。
2）CSS Sprites
国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并CSS 和JS 文件。现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
3）采用 lazyLoad
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
4）控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。一般情况下都是CSS在头部，JS在底部。
5）利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
6）减少重排（Reflow）
基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。减少Reflow，如果需要在DOM操作时添加样式，尽量使用增加class属性，而不是通过style操作样式。7）减少 DOM 操作
8）图标使用IconFont（字体图标）替换
19.网页从输入网址到渲染完成经历了哪些过程？
1) 输入网址；
2) 发送到DNS服务器，并获取域名对应的WEB服务器对应的IP地址；
3) 与web服务器建立TCP连接；
4) 浏览器向web服务器发送http请求；
5) web服务器响应请求，并返回指定URL的数据（或错误信息，或重定向的新的URL地址）；
6) 浏览器下载web服务器返回的数据及解析html源文件；
7) 生成DOM树，解析CSS和JS，渲染页面，直至显示完成。
