Vue面试核心概念

1. 什么是vue.js？

Vue是一个MVVM（Model-View-ViewModel）模型的前端JS框架。Model本质上来说就是数据，View就是视图（即最终展现给客户的页面）。MV（从Model到View）是由数据驱动视图，而VM（从view到model）则是由视图通过事件更新数据。

Vue的另一个特点是组件化开发，Vue可以把界面分割成多个组件（Component），每个组件可以包含自己的视图、数据、属性和事件，可以独立开发，独立测试，于是复杂的界面就可以分割成许多简单的部件来实现，从而把应用的复杂度降下来。

此外Vue还是渐进式的框架，使用者可以根据需要只引入所需要的部分，Vue容易上手，生态组件齐全，是轻量级（相对AngularJs,RectJs...）的前端框架。

2. 什么是MVVM？

Model代表数据模型，数据和业务逻辑都在Model层中定义；View 代表界面视图，负责数据的展示；ViewModel则负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作。

Model和View 并无直接关联，而是通过ViewModel 来进行联系的。Model 和View之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护即可，而不需要自己操作 DOM。

3. Vue的优点是什么？

（1）双向数据绑定：通过MVVM思想实现数据的双向绑定，让开发者不用再操作DOM对象，集中精力去处理业务逻辑；

（2）组件化开发：充分利用面向对象原则，把各种模块（界面、功能）拆分到一个个独立的组件（Component）中，单独封装，单独测试，把复杂问题分解成若干简单问题。

（3）虚拟DOM（Virtual DOM）技术：

通过Model生成View时，并不直接重生成所有DOM，而是预先通过JS进行计算比较，在内存中生成虚拟的DOM树，把新版本的虚拟DOM和原来的虚拟DOM比较，得出差异，最终只更新差异部分的实际DOM元素。

（4）渐进式、轻量高效：

渐进式是指在使用Vue开发时，不需要使用Vue的全家桶，而是根据需要选择自己所需要的部分技术；此外Vue提供的API也比较简洁，执行效率也很高。

4. v-if 和 v-show有什么区别？

v-show 仅仅控制元素的显示方式，也就是控制CSS中的display 属性在block 和none 来回切换；而v-if会控制这个 DOM 节点的存在与否。

当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

5. 简述Vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher（监视器）对象，它会在组件渲染的过程中把属性记录为依赖项，之后当依赖项的setter 被调用时，会通知 watcher 重新计算，从而导致它所关联的组件得以更新。

6. Vue中如何在组件内部实现一个双向数据绑定？

Vue对表单input类元素都提供了双向绑定属性：v-model。v-model一方面帮我们把model数据传入到input的value属性上，另一方面在input输入发生变化时把value值反向修改到我们的model上。

如果要自定义双向绑定机制，则在父组件通过props 传值给子组件，子组件则通过$emit来通知父组件修改相应的props值。我们在父组件中做了两件事，一是给子组件传入props，二是监听事件并用子元素的变化更新父元素传入props的模型数据。

7. 如何让CSS只在当前组件中起作用

将当前组件的