vue面试题

1. Vue解决了什么？

（1) 虚拟Dom: Dom操作是非常耗性能的，不支持使用原生DOM节点，解放Dom操作，常用的还是Dom 操作，只不过换了一种方式。
（2）组件化：把一个单页面应用拆分成一个一个组件，便于开发 以及后期的维护。
（3）视图，数据，结构分离：使数据的更改更加的简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相应的操作。
Vue存在很大的优势。
（4）轻量级框架:只关注视图层，是一个构建数据的视图集合，大小只有几十kb。
（5）简单易学：国人开发，中文文档，不存在语言障碍，便于理解和学习。
（6）运行速度快：跟recat 相比，同样都使用Dom操作，就性能而言，
（7）双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

2. MVVM理解 ？

MVVM是Model-view-viewModel 的缩写。
ViewModel(视图模型)是MVVM模式的核心。
Model是模型 ->指的是后端传递的数据。
View 是 视图->指的是所看到的页面。
Model和view 之间没有直接的关系，是通过viewModel来进行交互的。

它有两个方向：

1. View转化成Model - 实现方法：通过Dom数据监听。
2. Model转化成View - 实现方法：通过数据绑定。
   这两个方向 称之为 双向数据绑定。

在MVVM模式的框架下，model和ViewModel之间 和 View和ViewModel 之间 交互都是双向的。
View数据发生变化会反映在Model上，Model数据发生改变也会同步到View上，也可以理解成两者之间是 实时更新，互相影响。

ViewModel 通过 双向数据绑定 把 View层 和 Model层 连接起来。
然后 View 和Model 之间工作完全是自动的。

所以开发者只需要关注业务逻辑，不需要手动操作Dom，不需要关注数据同步问题，这些都MVVM统一管理。

MVVM 使用？

通过Object.defineProperty 来实现响应式原理

Object.defineProperty 使用？

Object.defineProperty() 方法会直接在一个 对象上定义一个新属性 或者 修改一个对象的现有属性，然后在返回这个对象

3. 虚拟Dom

虚拟Dom就是用对象的方式取代真实的Dom，把真实的dom保存在内存中，在内存中对象做模拟操作，构建一棵DOM树，打开页面浏览解析HTML元素，然后把状态保存起来，在内存中做真实地模拟操作，又生成一棵 Dom 树 ，然后两个树进行比较，根据DIFF算法，比较两棵树不同的地方，只渲染一次不同的地方。

DIFF算法
VNode 使用 Patch 方法生成一个DOM 节点
VNode 和 NewVNode 做比较
修改改变的Dom节点

4.双向数据绑定？ 数据劫持？

Vue中的 V-Model 可以实现 数据双向绑定，核心思想是通过 Object.defineProperty 来对Vue 的数据进行数据劫持。
主要分为三部分
（1）observer（数据监听器）主要负责—对Vue的数据进行数据劫持，使其拥有Get和Set方法。
（2）compile （指令解析器） 主要负责 — 绑定数据，指令，绑定试图更新方法。
（3）watcher （监听属性）主要负责 — obsever 和 compiller 之间的通信桥梁 ，只要属性发生改变，就会触发相应的回调函数，从而更新视图

5.key值作用

（1）主要作用就是 高效的更新虚拟Dom
（2）相当于唯一标识 ID ，给每个数据 一个 ID ，方便查找 ， 让他们具有可复用性。

6. 组件中写name 选项有什么作用？

（1）项目使用 KeepAlive 时，可搭配组件 name 进行环迅过滤。
（2）Dom 做递归组件的时候 需要调用自身 name
（3）VueDevtools 调试工具里显示的组件名称是由 Vue 中组件 name 决定的。

7.data为什么是一个函数

如果 data 是一个属性的话 ， 由于JS 语言的特点 ， 所有复用 组件 都会 受到影响。
如果data是一个函数 的话，每次复用都return一份新的数据，这样才能保证 ， 每个复用组件，不会受到影响。

8.vue 的 指令以及作用

v-html — 解析输出变量 能解析HTML 标签
v-text — 解析输出变量 不解析HTML标签
v-on — 给元素绑定事件 简写 @事件名=“方法名”
v-bind — 给标签绑定属性 简写 :属性名=“变量”
v-model — 实现双向数据绑定
v-pre — 跨过当前元素以及子元素的编译过程，以此来加快整个项目的编译速度
v-clock — 解决插值表达式 {{}} 的 闪烁问题。
v-if — 条件渲染指令
v-show — 条件输出，数据 的 显示隐藏 。使用css的 display 属性
v-once — 只渲染元素或组件 一次。
v-for — 循环遍历
v-else — 条件渲染指令，必须跟 if 配合使用
v-else-if — 多层条件渲染指令，必须跟 if 配合使用

9. vue 的 修饰符

.stop — 阻止事件冒泡
.once — 只触发一次
.prevent — 阻止默认事件
.captrue — 事件捕获
.self — 只有当事件作用在元素本身 才会触发
.number — 文本框内容转化成数字
.native — 触发原生JS 事件
.trim — 去除文本框左右空格
.keyup.enter
.keyup.space