本文档基于vue-cli技术栈总结了 https://www.jianshu.com/p/55c61751461b
vue-cli工程
vue.js核心知识
vue-router路由
vuex状态管理器
axios等http请求
移动端适配
Tab切换等常用功能
vue与原生app混合交互
vue生产环境部署
vue各项技术源码解析
MVVM设计模式
vue-cli工程深入拓展
等12个关于vue-cli开发的方面。
不仅可以帮你一次性详细阅读所有关于vue的面试题、更可以帮你拓展关于vue开发的视野。
关于vue的试题，看这一篇文档就够了！
vue-cli工程
1、构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？
2、vue-cli 工程常用的 npm 命令有哪些？
3、请说出vue-cli工程中每个文件夹和文件的用处
4、config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
5、请你详细介绍一些 package.json 里面的配置
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
vue核心知识点
1、vue.js的两个核心是什么？
2、请说出vue几种常用的指令
3、请问v-if和v-show有什么区别
4、vue常用的修饰符
5、v-on可以监听多个方法吗？
6、vue中key值的作用
7、vue中子组件调用父组件的方法
8、vue中keep-alive组件的作用
9、vue中如何编写可复用的组件？
10、什么是vue生命周期和生命周期钩子函数？
11、vue生命周期钩子函数有哪些？
12、vue如何监听键盘事件中的按键？
13、vue更新数组时触发视图更新的方法
14、vue中对象更改检测的注意事项
16、vue-cli工作中如何自定义一个过滤器？
17、vue等单页面应用及其优缺点
18、什么是vue的计算属性？
19、vue-cli提供的几种脚手架模板
20、vue父组件如何向子组件中传递数据？
21、vue-cli工程升级vue版本
22、vue-cli中如何使用组件的继承-mixin？
23、vue-cli中新增自定义指令
24、vue-cli开发环境如何使用全局常量？
25、 vue-cli生产环境如何使用全局常量?
26、vue-cli中如何自定义事件?
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
vue-router
1、vue-router如何响应 路由参数 的变化？
2、完整的 vue-router 导航解析流程
3、vue-router有哪几种导航钩子（ 导航守卫 ）？
4、vue-router的几种实例方法以及参数传递
5、vue-router的动态路由匹配以及使用
6、vue-router如何定义嵌套路由？
7、<router-link></router-link>组件及其属性
8、vue-router实现路由懒加载（ 动态加载路由 ）
9、vue-router路由的两种模式
10、history路由模式与后台的配合
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
vuex
1、什么是vuex？
2、使用vuex的核心概念
3、vuex在vue-cli中的应用
4、组件中使用 vuex 的值和修改值的地方？
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
http请求
1、Promise对象是什么？
2、axios、fetch与ajax有什么区别？
3、什么是JS的同源策略和跨域问题？
4、如何解决跨域问题？
5、vue-cli中如何使用JSON数据模拟？
6、vue-cli中http请求的统一管理。
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
UI样式
1、.vue组件的scoped属性的作用
2、如何让CSS只在当前组件中起作用？
3、vue-cli中常用的UI组件库
4、如何适配移动端？【 经典 】
5、移动端常用媒体查询的使用
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
常用功能
1、vue中如何实现tab切换功能？
2、vue中如何利用 keep-alive 标签实现某个组件缓存功能？
3、vue中实现切换页面时为左滑出效果
4、vue中父子组件如何相互调用方法？
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
混合开发
1、vue如何调用 原生app 提供的方法？
2、原生app 调用 vue 提供的方法，并将值传递到 .vue 组件中
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
生产环境
1、vue打包命令是什么？
2、vue打包后会生成哪些文件？
3、如何配置 vue 打包生成文件的路径？
4、vue如何优化首屏加载速度？
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
MVVM设计模式
1、MVC、MVP与MVVM模式
2、MVC、MVP与MVVM的区别
3、常见的实现MVVM几种方式
4、实现一个自己的MVVM（原理剖析）
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
源码剖析
1、vue内部与运行机制
2、vue-router源码解析
3、vuex工作原理详解
4、axios内部设计分析
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
深入拓展
1、vue开发命令 npm run dev 输入后的执行过程
2、MVC、MVP与MVVM模式
3、MVVM模式的优点以及与MVC模式的区别
4、vue的服务器端渲染
5、vue高版本中一些新特性的实践
6、从零写一个npm安装包
7、vue-cli中常用到的加载器
参考答案：https://www.kancloud.cn/hanxuming/vue-iq/728305
作者：鸭鸭鸭鸭鸭丶梨
链接：https://www.jianshu.com/p/55c61751461b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
2018最新web前端VUE面试题https://www.jianshu.com/p/605fe3012af3
vue是什么？
vue是构建数据驱动的web界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue是一种mvc和mvvm模式的开发框架，他的v-model可以实现数据的双向绑定。
不用操作dom节点并可以用v-for进行数据渲染。
vue的优点是什么?
a.低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
b.可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
c.独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
d.可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
vue当中的指令和它的用法？
v-if、v-show：判断是否隐藏；v-for：数据循环出来；v-on：监听事件、@change、@click；v-bind:class：绑定一个属性；v-model：实现双向绑定。
v-if和v-show指令的共同点和不同点?
v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏。
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果。
v-model是什么？怎么使用？ vue中标签怎么绑定事件？
可以实现双向绑定。
vue的model层的data属性。绑定事件：v-bind
vue的双向绑定的原理？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。
代码：
var vm = new Vue({
data: {
obj: {
a: 1
}
},
created: function () {
console.log(this.obj);
}
});
我们可以看到属性a有两个相对应的get和set方法，为什么会多出这两个方法呢？因为vue是通过Object.defineProperty()来实现数据劫持的。
Object.defineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set，如果还不熟悉其用法
在平常，我们很容易就可以打印出一个对象的属性数据：
var Book = {
name: 'vue权威指南'
};
console.log(Book.name); // vue权威指南
如果想要在执行console.log(book.name)的同时，直接给书名加个书名号，那要怎么处理呢？或者说要通过什么监听对象 Book 的属性值。这时候Object.defineProperty( )就派上用场了，代码如下：
var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
set: function (value) {
name = value;
console.log('你取了一个书名叫做' + value);
},
get: function () {
return '《' + name + '》'
}
})
Book.name = 'vue权威指南'; // 你取了一个书名叫做vue权威指南
console.log(Book.name); // 《vue权威指南》
我们通过Object.defineProperty( )设置了对象Book的name属性，对其get和set进行重写操作，顾名思义，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数，所以当执行 Book.name = 'vue权威指南' 这个语句时，控制台会打印出 "你取了一个书名叫做vue权威指南"，紧接着，当读取这个属性时，就会输出 "《vue权威指南》"。
实现过程
因此接下去我们执行以下3个步骤，实现数据的双向绑定：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
vue路由怎么使用？
1.下载安装（用webpack新建vue项目时，默认选择安装vue-router），
2.创建路由文件，
3.在router文件夹里的index.js里配置路由，
4.在main.js中引入router文件夹下的router.js文件
5.在app.vue里设置锚点 （router-link 和 router-view ，routerlink链接到的路由会展示在router-view里，如果没有router-view标签且index.js设置路由的name属性则页面会直接跳转）
vue路由怎么实现传值的？
当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
组件之间的传值通信？
1.子组件在props中创建一个属性，用来接收父组件传过来的值；
2.在父组件中注册子组件；
3.在子组件标签中添加子组件props中创建的属性；
4.把需要传给子组件的值赋给该属性。
子组件向父组件传值：
1.子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
3.在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
vue-router的钩子函数
总体来讲vue里面提供了三大类钩子
1、全局钩子
2、某个路由独享的钩子
3、组件内钩子
顾名思义，全局钩子全局用，使用如下
const router =new VueRouter({
mode: 'history',
base: __dirname,
routes: routerConfig
})
router.beforeEach((to, from, next) => {
document.title = to.meta.title || 'demo'if(!to.query.url && from.query.url) {
to.query.url = from.query.url
}
next()
})
router.afterEach(route => {
})
就像说的一样，给某个路由单独使用的，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。如下
const router =new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ... },
beforeLeave: (to, from, next) => {
// ... }
}
]
})
首先看一下官方定义：
你可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
路由组件!路由组件!路由组件!重要的事情说三遍，大家一定要注意这里说的是“路由组件”，而路由组件！== 组件，之前一直没注意这点，然后在子组件里面傻乎乎的调钩子函数发现一直没用。。。
我们先来看一下什么是路由组件？
路由组件：直接定义在router中component处的组件
也就是说router中定义的入口vue文件之外的组件，是没有钩子函数的，也就不用说使用了。但是如果你使用了并不会报错，只是没反应。（本想画个图的，太懒了。。。自己理解理解吧，很好理解的）
这里再回头看下这个路由内钩子是怎么用的，很简单和data、method平级的方法
beforeRouteLeave(to, from, next) {
// .... next()
},
beforeRouteEnter(to, from, next) {
// .... next()
},
beforeRouteUpdate(to, from, next) {
// .... next()
},
computed: {},
method: {}
三种路由钩子中都涉及到了三个参数，这里直接上官方介绍吧
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
axios是什么？怎么使用？
axios 是一个基于 Promise 的，为浏览器和 Node.js 设计的 HTTP 客户端。它尽可能简化封装了 HTTP 相关的各种操作，在 Web App 中使用非常方便。
Vue 2 官方建议在由 Vue 构建的 SPA 中使用 axios 进行 HTTP 操作。
axios 用于请求后台资源的模块。npm install axios -S装好，
然后发送的是跨域，需在配置文件中config/index.js进行设置。
后台如果是Tp5则定义一个资源路由。js中使用import进来，
然后.get或.post。返回在.then函数中如果成功，
失败则是在.catch函数中。
vuex
vuex是一个专门为vue.js设计的集中式状态管理架构。我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。如果没有vuex 请求到的数据在页面刷新后就必须再请求一次，但是有了vuex就可以把这些数据当做状态保存到vuex中，在中大型项目中有很多共用的数据，就可以用vuex。比如单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车就可以使用。
vuex有哪几种属性？
有五种，分别是 state（访问状态对象）、getter（计算过滤操作）、mutation（修改状态）、action（异步修改状态）、 module（模块组）
vuejs与angularjs的区别？
相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点：
1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说，这个优化差异还是比较明显的。
vue不操作DOM节点查找元素
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了
active-class是哪个组件的属性？
vue-router模块的router-link组件
嵌套路由怎么定义？
我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入两个组件
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
{ path: "/", redirect: "/home" },//重定向,指向了home组件
{
path: "/home", component: home,
children: [
{ path: "/home/game", component: game }
]
}
]
//创建路由实例
const router = new VueRouter({routes})
new Vue({
el: '#app',
data: {
},
methods: {
},
router
})
怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/:id。
使用router对象的params.id。
scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
css的预编译。
使用步骤：
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：还是在同一个文件，配置一个module属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
有哪几大特性:
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器，例如（）
3、可以嵌套
mint-ui是什么？怎么使用？说出至少三个组件使用方法？
基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。
组件一：Toast(‘登录成功’)；
组件二：mint-header；
组件三：mint-swiper
mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
你是怎么认识vuex的？
vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
第一步：在components目录新建你的组件文件（swithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import swithButtonfrom ‘../components/swithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{swithButton}
第四步：在template视图view中使用，
问题有：swithButton命名，使用的时候则swith-button。
聊聊你对Vue.js的template编译的理解？
简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，通过compile编译器把template编译成AST语法树，compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
vuejs与angularjs以及react的区别？
1.与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点：
1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说，这个优化差异还是比较明显的。
2.与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
中心思想相同：一切都是组件，组件实例之间可以嵌套。
都提供合理的钩子函数，可以让开发者定制化地去处理需求。
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不同点：
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。
网友评论