之前有提到，在经历了前端转型之后，一场技术变革的到来，小程序，h5移动端，对性能优化的要求越来越高，受面向对象思想编程方式的影响，前端现在主流的技术框架就是Vue,React,Angular.他们的数据驱动模式，MVVM模式，很受欢迎，这种spa单页面应用，组件思维对一个庞大的web应用很有帮助提升加载速度，减少Dom操作，随之而来的也就是不断地学习，对技术员的技术要求也开始偏向于vue,小程序，公众号，由于智能手机的普及，app端比网页更受欢迎，所以就要不断地学习新的知识，否则会被淘汰。
好了，不说废话了，总结一下使用vue开发项目过程中遇到的坑以及面试经验。
step一，谈谈你对MVVM 的理解？
- MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
step二，vue路由传参的方式
[图片上传失败...(image-f2dfe1-1554273574051)]
- router.js 后边跟:id配置参数
- query 方法传参
- name 方法传参
- vue自带标签
标签传参 - 详情请看Vue $router 路由传参的4种方法详解
step三，vue组件之间的传参
[图片上传失败...(image-901dae-1554273574051)]
- 父传子 props
- 子传父 this.$emit
- 非父子组件 eventHub 中转站 this.$on
- vuex state 存的变量，mutations改变的状态 actions 触发的行为（方法）
组件传参具体的传参请参考vue2.0父子组件以及非父子组件通信传参详解
vuex stroe 具体的请参考vuex原理，用法踩坑小计
step四，vue-router有哪几种导航钩子？
答案
- 第一种是全局导航钩子（全局守卫）：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
- 第 二种：全局解析守卫
router.beforeResolve,在导航被确认前，所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。（2.5.0新增）。 - 第三种：单独路由独享的守卫
beforeEnter,在路由配置时定义，与全局守卫的方法是一样的。 - 第四种：组件内的守卫。直接在路由组件内定义守卫，
以下为官网文档的介绍：
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
step五，请写出几种常用的vue指令
v-class、v-for、v-if、v-show、v-on,v-model
step六，请详细解释一下vue(2.0)的生命周期？
答案：
| 生命周期 | 阶段 | 描述 |
|---|---|---|
| beforeCreated | 创建前 | vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 |
| created | 创建后 | vue实例的数据对象data有了，$el还没有。 |
| beforeMount | 模板载入前 | vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换 |
| mounted | 模板载入后 | vue实例挂载完成，data.message成功渲染。 |
| beforeUpdate | 组件更新前 | 组件更新之前调用 |
| updated | 组件更新后 | 组件更新之后调用 |
| beforeDestroy | 组件销毁前 | 调用$destroy方法后，立即执行beforeDestroy |
| pdestroyed | 组件销毁后 | 组件销毁后调用，此时只剩下dom空壳 |
step七，slot是什么？并说一下详细的用法？
答案：
vue官网解释：slot 插槽，-------（Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将
）是不是看完稀里糊涂的，反正我是稀里糊涂的，再来说说我自己的理解:
slot就是为了实现真正的灵活的单页组件，在组件外部灵活控制组件内部的内容一种形式或者是入口，就是将组件内所需要的内容以插槽（slot）的形式插入到公共组件中，以达到灵活控制。
当组件渲染的时候，这个
step八，谈谈你对vue响应式原理的理解?
答案：
先看看官网的解释：
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
step九，直接对对象属性进行添加和删除会不会直接响应到视图中？也就是说数组的更新方法？并说明原因？
答案：
直接对对象属性进行添加和删除是不会响应到视图中的，需要用到this.$set()方法
举个例子
var vm = new Vue({
data:{
myjson:{
name:"张三"
}
}
})
vm.myjson.age= "12"; //这样直接对对象属性进行增加是不会直接响应到视图中的。
需要这么写：
this.$set(this.myjson,'age',12);//才会生效
原因
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
step十，如何创建一个公共的全局组件，并在每个页面中调用以及如何创建并调用公共的方法？
答案:
[图片上传失败...(image-a84d49-1554273574050)]
将创建好的组件或者js方法导出并挂载到vue实例上。
详情请参考关于vue全局引用公共的js和公共的组件的折腾
step十一，请说明v-if和v-show的异同？
同：两者都是达到显示隐藏的功能
异：
-
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果 -
v-show指令通过修改元素的display属性让其显示或者隐藏
step十二，
答案：
用自己的理解说
比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用
step十三，
答案：
Home
Home
-
replace属性，加上该属性页面切换不会留下历史纪录。
-
tag属性，具有tag属性的router-link会被渲染成相应的标签
Home
Home
此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面
-
active-class属性：设置链接激活时的class属性：默认值为router-link-active,所以如果没有设置，就会被渲染为这个class，我们可以在router.js里边配置这个属性
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})
Home
-
exact属性：严格模式
// 这个链接只会在地址为 / 的时候被激活
Home
USER
USER-info
// 如果不设置exact，则当路由到了/user/userinfo 页面时，USER也是被设置了router-link-active样式的！
- 方法：
router-link默认是触发router.push(location)，如果设置的replace 则触发router.replace(location)，这有啥区别呢?
router.push() ：导航跑到不同的URL,这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url.
router.replace(): 跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录.
router.go(n): 这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)
step十四，v-once的作用和用法？
只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
举个例子：一看便知
{{count}}
step十五，如何解决在加载页面时出现的闪烁问题。
v-cloak详情请移步v-cloak详解
step十六，vue如何兼容ie的问题。
答案：
回答关键字 - babel-polyfill插件
详情请移步vue-cli 解决ie兼容性问题
step十七，vue-cli如何解决跨域？
答案：常见的后台加请求头以及jsonp就不详细解释了，若要看详细教程请移步前端面试题总结。
这里主要介绍的是 npm模块之http-proxy-middleware的解决跨域的办法。详情移步vue-cli如何解决跨域
作者：愿醒静卧忘尘谷
链接：https://www.jianshu.com/p/42a4be57287f
来源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。