VUE面试题

VUE面试题

---

前言

vue.js可以说是国内最火的前端框架，React是最流行的前端框架，二者都可以用来开发手机APP。
Vue.js是一套构建用户界面的框架，只关注视图层，易上手，便于与第三方库或既有项目整合。（Vue有配套的第三方库，可以用来整合起来做大型项目开发）。人无我有，人有我优。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue核心知识——理论篇

1.对于Vue是一套渐进式框架的理解

渐进式代表的含义是：主张最少。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。

2、vue.js的两个核心是什么？

数据驱动和组件化

3.vue生命周期钩子函数有哪些？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。具体执行流程查看下图。

4.vue 的双向绑定的原理是什么？

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程：
我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
流程图如下：

二、vue核心知识——语法篇

1.请问 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有更高的初始渲染消耗，适合做频繁的额切换。

2、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