1.vue.js的两个核心是什么？
数据驱动和组件化。
2.vue 的双向绑定的原理是什么？
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程：
我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
流程图如下：
3.vue生命周期钩子函数有哪些？
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。具体执行流程查看下图。
4.请问 v-if 和 v-show 有什么区别？
相同点： 两者都是在判断DOM节点是否要显示。 不同点： a.实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。 b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换； c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留； d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换。
5.vue常用的修饰符
a、按键修饰符 如：.delete（捕获“删除”和”退格“键） 用法上和事件修饰符一样，挂载在v-on:后面，语法：v-on:keyup.xxx=’yyy’ <inputclass = 'aaa' v-model="inputValue" @keyup.delete="onKey"/> b、系统修饰符 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器 .ctrl .alt .shift .meta c、鼠标按钮修饰符 .left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮。如：<button @click.middle ="onClick">A 鼠标滚轮单击触发 Click默认是鼠标左键单击 d、其他修饰符 .lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ，我们可以添加 lazy 修饰符，从而转变为使用 change事件进行同步： <inputv-model.lazy="msg" > .number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 .number修饰符： 这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析，则会返回原始的值。 .trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： <inputv-model.trim="msg">
同样前面都有空格加上.trim后 将前后空格都去掉了。
6.nextTick
在下次dom更新循环结束之后执行延迟回调，可用于获取更新后的dom状态 新版本中默认是microtasks, v-on中会使用macrotasks macrotasks任务的实现: osetImmediate / MessageChannel / setTimeout
7.什么是vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
8.vuex
state: 状态中心 mutations: 更改状态 actions: 异步更改状态 getters: 获取状态 modules: 将state分成多个modules，便于管理
9.vue中 key 值的作用
使用key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们， 否则vue只会替换其内部属性而不会触发过渡效果。
10.Vue 组件中 data 为什么必须是函数？
在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。 当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。
11.v-for 与 v-if 的优先级
v-for的优先级比v-if高。
12.说出至少 4 种 vue 当中的指令和它的用法
v-if(判断是否隐藏) v-for(把数据遍历出来) v-bind(绑定属性) v-model(实现双向绑定)
13.vue中子组件调用父组件的方法
第一种方法是直接在子组件中通过this.emit向父组件触发一个事件，父组件监听这个事件就行了。 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法。
14.vue页面级组件之间传值
1.使用vue-router通过跳转链接带参数传参。 2.使用本地缓存localStorge。 3.使用vuex数据管理传值。
15.说说vue的动态组件。
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。 主要考查面试这 component的 is属性。
16.keep-alive内置组件的作用
可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中。
17.递归组件的用法
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。 首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。
18.怎么定义vue-router的动态路由？怎么获取传过来的值？
动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下： { path: '/details/:id' name: 'Details' components: Details } 访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。 当匹配到/details下的路由时，参数值会被设置到this.route.params.id
19.vue-router有哪几种路由守卫?
路由守卫为： 全局守卫：beforeEach 后置守卫：afterEach 全局解析守卫：beforeResolve 路由独享守卫：beforeEnter
20.router的区别是什么？
route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。
21.vue-loader是什么？使用它的用途有哪些？
解析.vue文件的一个加载器。 用途：js可以写es6、style样式可以scss或less、template可以加jade等
22.scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
css的预编译。 使用步骤： 第一步：先装css-loader、node-loader、sass-loader等加载器模块 第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss 第三步：在同一个文件，配置一个module属性 第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss” 特性: 可以用变量，例如（$变量名称=值）； 可以用混合器，例如（） 可以嵌套
23.为什么使用key？
当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
24.为什么避免 v-if 和 v-for 用在一起
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。
25.VNode是什么？虚拟 DOM是什么？
Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。
26.vue-loader是什么？使用它的用途有哪些？
解析.vue文件的一个加载器，跟template/js/style转换成js模块。 用途：js可以写es6、style样式可以scss或less、template可以加jade等
27.请说出vue.cli项目中src目录每个文件夹和文件的用法？
assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
28.vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default { 第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’ 第三步：注入到vue的子组件的components属性上面,components:{smithButton} 第四步：在template视图view中使用， 问题有：smithButton命名，使用的时候则smith-button。
29.聊聊你对Vue.js的template编译的理解？
简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点） 详情步骤： 首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。 然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
更多Vue、JavaScript面试题【题目+解析】点击我领取哦，免费分享
!
