一、对于MVVM的理解？

MVVM 是 Model-View-ViewModel 的缩写。

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

View 代表UI 组件，它负责将数据模型转化成UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

二、Vue的优点：

1）Vue确实小而美，开发体验非常好。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

2）Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性，这可能算是一个小的不完美，但它支持所有兼容ECMAScript 5的浏览器。

3）在 Vue 里，一个组件本质上是一个拥有预定义选项的一个Vue 实例。在 Vue 中注册组件很简单，也是它的一大优势。

三、Vue常用的指令：

v-for 、 v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。

v-if 、v-if指令是条件渲染指令，它根据表达式的真假来删除和插入元素

v-bind、指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class=”’’

v-bind:argument="expression"

v-on用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：

<a v-on:click="doSomething">

语法：V-on:click=“事件回调函数的名称”

v-show、也是条件渲染指令，控制元素显隐，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。

v-if为true，后面的v-else不会渲染到HTML；v-show为tue，但是后面的v-else渲染到HTML。

四、v-if和v-show的区别：

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

五、nextTick

由于VUE的数据驱动视图更新，是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。

应用场景：

　　　　需要在视图更新之后，基于新的视图进行操作。

　　以上出现了事件循环的概念，其涉及到JS的运行机制，包括主线程的执行栈、异步队列、异步API、事件循环的协作，此处不展开之后再总结。大致理解：主线程完成同步环境执行，查询任务队列，提取队首的任务，放入主线程中执行；执行完毕，再重复该操作，该过程称为事件循环。而主线程的每次读取任务队列操作，是一个事件循环的开始。异步callback不可能处在同一事件循环中。

简单总结事件循环：

　　　　同步代码执行 -> 查找异步队列，推入执行栈，执行callback1[事件循环1] ->查找异步队列，推入执行栈，执行callback2[事件循环2]...

　　即每个异步callback，最终都会形成自己独立的一个事件循环。

　　结合nextTick的由来，可以推出每个事件循环中，nextTick触发的时机：

同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发

 　　tips：本文的任务队列、消息队列、异步队列指同一个东西，均指macrotask queue。

事件循环详解：http://www.cnblogs.com/hity-tt/p/6733062.html 

五、Vue组件中，data为什么必须是函数：

每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

六、Vue中key的作用：

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

“vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组件高度复用增加key可以标识组件的唯一性,为了更好地区别各个组件key的作用主要是为了高效的更新虚拟DOM”

七、Watch和computer的区别：

作用机制上

1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数。

二、从性质上

1.methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）。

2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）。

3.watch:类似于监听机制+事件机制。

八、Vue中双向绑定的数据原理：

通过watcher事件来监听的

①用Object.defineproperty()重新定义（set方法）对象设置属性值和（get方法）获取属性值的操纵来实现的

Object.property()方法的解释：Object.property(参数1，参数2，参数3)   返回值为该对象obj

其中参数1为该对象（obj），参数2为要定义或修改的对象的属性名，参数3为属性描述符，属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合使用。而get和set属于存取描述符对象的属性。

②数据的劫持和发布订阅模式

vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的

实现步骤：1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者

2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图

3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者

九、vue之间组件传递：

1.父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据;

子组件传给父组件：$emit方法传递参数

2.非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

十、vue生命周期的理解：

beforeCreate（创建前） 在数据观测和初始化事件还未开始

created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

1.什么是vue生命周期？

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

2.vue生命周期的作用是什么？

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

3.vue生命周期总共有几个阶段？

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

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

答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在 哪个周期中就已经完成？

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

十一、v-router的用法：

十二、vue单页面应用的优缺点：

       单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。

       多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点和缺点：

      优点：

         1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。

         2、前后端分离，比如vue项目

         3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改                 和调整；

      缺点：

        1、首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。

        2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。

        3、页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

十三、rotue和router的区别

答：rotue是路由信息对象，包括path，param，hash，name，query，fullpath，match等路由信息参数。

而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

十四、vue路由的钩子函数（导航钩子：）

首页可以控制导航跳转，beforeEach，afterEach，beforeEnter等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

十五、VueX的用法：

多个视图依赖于同一状态。

- 来自不同视图的行为需要变更同一状态。

vuex 类似Redux  的状态管理器, 用来管理Vue的所有组件状态

采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

十六、原生js的问题es6

1.js闭包：一个函数能够访问其函数外部作用域中的变量。

闭包的三大特点为：

1、函数嵌套函数

2、内部函数可以访问外部函数的变量

3、参数和变量不会被回收。

可以通过闭包，设计私有变量及方法。

2.原型链：

    任何对象都有一个原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototype指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有prototype，只有方法才有prototype。

 那什么是构造函数呢？

    用function声明的都是函数，而如果直接调用的话，那么Person()就是一个普通函数，只有用函数new产生对象时，这个函数才是new出来对象的构造函数。

es6的新属性的使用:

1.去重数组new Set()

letarr = [1,2,2,3];

letset =newSet(arr);

letnewArr =Array.from(set);

console.log(newArr);// [1, 2, 3]

2.对象合并Object.assign(),

3...，es6扩展运算符

vararr = [1,2,3];

vararr2 = [...arr,4,5,6];

console.log(arr2);//[1,2,3,4,5,6]

var，let.const的定义区别：

1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。会提升变量

 var a; console.log(a); //undefined

2.let是块级作用域,函数内部使用let定义后,对函数外部无影响。let不允许在同一个作用域内，重复声明同一个变量

 let c = 3; console.log(c) function change(){ let c ...

3.const定义的变量不可以修改,而且必须初始化。 //const b; //这样定义不对...