马上要面试，这里记录一下Vue的基础面试题，手写一遍加深理解，大神不用浪费时间往下看了
一、对于MVVM的理解
MVVM是MOdel-View-ViewModel的缩写
Model代表数据模型，可以在Model中定义数据修改和操作的业务逻辑
View代表UI组件，负责将数据模型转化为UI展现出来
ViewModel负责监听数据模型的改变和控制视图行为，处理用户交互；是一个同步Model和View的对象，连接Model和View。
在MVVM架构下，view和Model之间并没有直接的联系，而是通过ViewModel进行交互,
Model与ViewModel之间的交互式双向的，因此View数据的变化会同步到Model中，而Model中的数据变化也会立即反应到View上
ViewModel通过双向数据绑定将View层和Model层连接了起来，而View层与Model的同步是完全自动的无需认为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM；
不需要关注数据状态的同步问题，复杂的数据状态维护完全有MVVM来统一管理。
二、Vue的生命周期
beforeCreate: 实例创建之前，在数据观测，初始化事件还未开始
created： 实例创建完成，完成数据观测，属性和方法的运算，初始化事件，此时$el还没有显示出来，可以访问到data，computed，methods，watch
beforeMount：在挂载之前被调用，相关的render函数首次被调用。编译模板，把data里面的数据和模板生成html，还没有挂载到Dom上
Mounted：在el被新创建的vm.$el替换，并挂载到实例上后调用。实例挂载在Dom上，此时可以通过Dom的api获取dom节点，$el可以被访问了
beforeUpdate： 响应数据更新时调用，发生在虚拟dom打补丁之前
Updated：虚拟dom重新渲染或打补丁之后调用，dom已经更新，可以进行依赖于dom的操作
beforeDestroy：实例销毁之前调用，此时组件完全可用，可以通过this获取实例
destroyed：实例销毁后调用
1.什么是Vue生命周期
Vue实例从创建到销毁的过程，就是生命周期；从开始创建、初始化数据、编译模板、挂载dom-->渲染、更新、更新渲染、销毁等一系列过程，称之为Vue的生命周期
2.vue生命周期的作用？
生命周期中有多个事件钩子，有利于我们控制整个vue实例的过程，形成更好的逻辑
3.vue生命周期分为几个阶段
8个阶段分别是：创建前、创建后，挂载前，挂载后、更新前、更新后、销毁前、销毁后
4.Dom渲染在哪个钩子中就已经完成了？
mounted
三、Vue实现数据双向绑定的原理（Object.defineProperty）
vue主要采用数据劫持结合发布订阅者模式实现数据双向绑定，通过Object.defineproperty()来劫持各个属性的setter和getter，在
数据变动时发布消息给订阅者，触发相应监听回调。
当把一个普通JavaScript对象传给vue实例作为它的data选项时，vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter,
用户看不到getter/setter，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化
vue的数据双向绑定，将MVVM作为数据绑定的入口，整合observe，compile，和watcher三者，通过Observer来监听自己的model的数据变化
通过compile来解析编译模板指令，最终利用watcher搭起Observer和compile之间的通信桥梁，达到数据变化-->视图更新,视图交互变化-->数据model变更的双向绑定效果
<script>
var obj = {}
Object.defineProperty(obj,'txt',{
get: function() {
return obj
},
set: function(newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup',function(e) {
obj.txt = e.target.value
})
</script>
四、组件件的参数传递
1，父组件与子组件传值
父传子：props
子传父：$emit方法传递参数
2， 兄弟组件传值
使用vuex或者eventBus(事件总线)
五、vue的路由模式有哪些？有什么区别？
两种模式： hash和history
hash模式： 在浏览器的url地址栏，#号以及#号后面的字符称之为hash，这种路由称之为hash模式导航；可以用window.location.hash读取hash
hash虽然在url中，但是不被包含在http请求中；只用来知道浏览器动作，对服务端完全无用，hash不会重新加载页面
hash模式下，仅hash符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误
history模式： 采用html5的新特性；url就像正常的url一样，不会有#号；使用需要后台配置支持，增加一个覆盖所有情况的候选资源，如果匹配不到任何资源，就返回同一个index.html页面
六、Vue与React以及Angular的区别
1.Vue与React
相同点：都采用虚拟DOM技术，都是组件化开发，都需要编译后使用，都提供了钩子函数，都不内置ajax，route等功能核心包，而是以插件的方式加载，都支持服务器端渲染
都提供了自动化构建工具
不同点：
react是函数式思想，vue是响应式思想，数据驱动视图；
react适合大型项目，vue比较适合中小型项目；
react采用的虚拟dom会对渲染出来的结果做脏检查，vue在模板中定义了指令，过滤器等，可以非常方便，快捷的操作虚拟dom
2.Vue与Angular
相同点： 都支持指令，都支持过滤器，都支持双向数据绑定，都不支持低端浏览器
不同点： Angular学习成本高，而vue本身提供的api都比较简单，直观；Angular依赖对数据做脏值检查，所以watcher越多越慢，而vue使用基于依赖追踪的观察并使用异步队列更新；
七、Vue路由钩子函数
1 全局路由钩子：beforeEach，afterEach ，beforeResolve（解析钩子）
2 路由独享的钩子：beforeEnter
3 组件内钩子：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
八、vue-cli怎么新增自定义指令？
<template>
<div id="app">
<div v-dir1></div>
</div>
</template>
<script>
var app = new Vue({
el: '#app',
data: {
},
//创建局部指令
directives: {
dir1: {
inserted(el) {
// el,当前使用指令的dom
el.style.width = '200px'
el.style.height = '200px'
el.style.background = '#f00'
}
}
}
})
</script>
九、对keep-alive的了解？
keep-alive是Vue的一个内置组件，可以使被包含的组件保留状态，或避免重新渲染
keep-alive有两个属性，include和exclude
include--字符串或正则，任何名称匹配的组件都会被缓存，使用逗号分隔开，或者使用数组方式
exclude--字符串或正则，任何名称匹配的组件都不会被缓存
使用方法
<keep-alive>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
十、一句话回答的面试题
1.css只在当前组件起作用：scoped
2.v-if与v-show的区别：
v-if会销毁dom重新创建，是真正的条件渲染，v-show只是css样式display的切换；
v-if首次加载开销比较大
v-if适用于切换频率较低的情况，而v-show适用于频繁切换
3.route与router的区别？
route是路由信息对象，包括path，params，hash，query，fullPath,matched,name等路由信息
router是路由实例对象，包含了路由的跳转方法，钩子函数等
4.Vuejs的两大核心
数据驱动，组件系统
5.常用的几种指令： v-if,v-else,v-show,v-for,v-bind,v-text,v-html，v-on
6.vue的常用修饰符：
.number ：将表单字符数字转化为数字
.prevent：提交事件不再重载页面
.stop：阻止事件冒泡
.self：当事件发生在给元素本身而不是子元素的时候触发
.trim：去除表单前后空格
.lazy: input失去焦点触发change事件
7.v-on可以绑定多个方法吗？ 可以 <input type='text' @focu="" @blur="" />
8.vue中key值得作用：
更高效的更新虚拟dom
9.什么是vue的计算属性？computed与methods有什么不同？
在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采用计算属性的方法
好处：数据处理结构清晰；依赖于数据，数据更新，处理结果自动更新；计算属性的this指向组件实例；
区别：computed是属性调用，而methods是函数调用
computed具有缓存功能，当依赖的数据不发生改变时，直接从缓存中取值，不需要重新计算
methods不管依赖的数据是否改变，都会重新计算一次
10.vue等单页面应用及其优缺点
优点：组件化，轻量，简洁，高效，数据驱动视图等
缺点：不利于seo，不支持低级浏览器，第一次加载耗时长，不能使用浏览器的前进后退导航按钮