1.谈谈你对MVVM开发模式的理解

MVVM分为Model、View、Viewmodel三者。 Model：代表数据模型，数据和业务逻辑都在Model层中定义； View：代表UI视图，负责数据的展开； ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作； Model和View并无直接关联，而且通过Viewmodel来进行联系的，Model和Viewmodel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。  

2.Vue有哪些指令

v-html	相当于innerHTML，绑定一些包含html代码的数据在视图上
v-text	用于更新标签包含的文本，它的作用跟双大括号{{}}效果是一样，当于innerText
v-on	监听 DOM 事件，并在触发时运行一些 JavaScript 代码,通过v-on指令修饰click点击事件,可简写用@代替
v-bind	数据单向绑定，用于动态改变标签内的属性 ，可简写用：代替
v-once	界面不跟数据变化，只渲染一次
v-model	数据双向绑定，用于实现表单输入和应用状态数据绑定
v-show	前端样式块、元素在指令的表达式返回 true值的时候被渲染 ，不会重新进行DOM的删除和创建操作，只切换了元素的 display:none 样式
v-if	前端样式块、元素在指令的表达式返回 true值的时候被渲染 ，会重新进行DOM的删除和创建操作
v-for	相当于JS中的for in循环, 可以根据数据多次渲染元素
v-else	和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来
v-cloak	数据渲染后自动显示元素，可以解决插值表达式闪烁的问题

3.v-show和v-if指令的共同点和不同点

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

 4.什么是vue生命周期

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

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

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

6.vue的生命周期及作用

创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。

7.你的接口请求一般放在哪个生命周期中

 接口请求一般放在 mounted中，但需要注意的是服务端渲染时不支持 mounted，需要放到created中

 8.vue组件间通信方式

1.vue父组件向子组件传递数据？
　主要通过props来实现的 具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组 件通过props接收。

2.子组件向父组件传递事件？
　父组件向子组传递事件方法，子组件通过$emit触发事件，回调给父组件

3.任意组件之间通信$emit.$on:eventBus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时合适

 9.Vue的双向数据绑定原理是什么？

vue.js是采用数据劫持结合发布者 - 订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

 10.vue中 key 值的作用

key的作用主要是为了高效的更新虚拟DOM。

key 是给每一个 vnode 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速。

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，
否则 Vue 为了效率只会替换相同标签内部的内容。

 11.Vue 组件 data 为什么必须是函数 ?

 避免组件中的数据互相影响，同一个组件被复用多次会创建多个实例，如果data是一个对象的话，这些实例用的就是同一个构造函数，为了保证组件的数据独立，要求每个组件都必须通过data函数返回一个对象作为组件的状态。

12.nextTick 的作用

nextTick可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM

13.computed和watch区别

computed是计算属性,具有缓存性。
当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed。
用于依赖发生变化时，触发属性重新计算。

watch更多的是一种观察的作用，用于监听某些数据的回调。每当所监听的数据发生变化时才能执行回调处理后续操作。

在 Vue 中，watch 就是监听值变化 换句话说，如果监听的值变化了，就去执行对应的函数 watch 有两个重要的选项，

1.immediate，初始化监听，表示第一次渲染的时候是否执行这个函数

2.deep，深度监听，如果监听一个对象，那么是否也监听到对象里面的属性变化

14.vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

15.为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素， 不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次， 且不会在 v-if 为否的时候运算 v-for。

 16.delete和Vue.delete删除数组的区别

delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 Vue.delete 直接删除了数组 改变了数组的键值。

17.$route和$router的区别 

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

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

18.v-modal的使用

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

v-bind绑定一个value属性；

v-on指令给当前元素绑定input事件

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

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

20.vue的两个核心点

数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。

21.vue更新数组时触发视图更新的方法 

push()；pop()；shift()；unshift()；splice()； sort()；reverse()

22.什么是声明式导航，什么是编程式导航 

声明式导航
<router-link to=""></router-link>
<router-link tag="li" to="/">首页</router-link>

编程式导航
router.push(...)
this.$router.push('/goods/detail')
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)   ==>> 队列的方式（先进先出）
 this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)    ==>> 栈的方式（先进后出）

23.<keep-alive></keep-alive>的作用是什么?

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

 24.如何让CSS只在当前组件中起作用？

在组件中的style前面加上scoped

25.如何获取dom?

ref="domName" 用法：this.$refs.domName