前端框架VUE面试基础问答|dom|viewmodel|vue|监听器|视图

VUE属于现在比较热门的前端框架，因为VUE好上手学习起来也不难，所以有时间还想从事前端的朋友还请认真看完。

什么是VUE？

首先Vue.js（VUE），是一套用于构建用户界面的渐进式JavaScript 框架，自底层向上应用，Vue的核心库只关注视图层，容易入门，可以和第三方库或者已有的项目进行整合，可以做复杂的单页应用。

VUE的两个核心是什么？

数据驱动：在VUE中，数据的改变会驱动视图的自动更新。传统做法是需要手动改变DOM来使视图更新，而VUE只需要改变数据。

组件化：组件化开发优点很多，可以很好降低数据之间的耦合度。将常用代码封装成组件之后就能高度复用，提高代码可复用性。

这里说一下，一个页面可以有多个模块/组件组成。

什么是VUE的MVVM模式？

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步View 和 Model 的对象。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反映到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

MVVM和MVC有什么区别？

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

什么是VUE的双向绑定？

VUE的双向绑定是通过数据劫持结合发布者——订阅者的方式实现。

我们知道双方是绑定的，首先对数据进行劫持监听，所以需要监听器Observer，用来监听所有属性，如果属性发生变化，就需要告诉订阅者Watcher是否需要更新，因为订阅者是多个，所以要有一个消息订阅器来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理，接着有一个指令解析器conpile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板或者绑定相应的函数，此时订阅者Watcher接收到相应属性变化，就会执行对应的更新函数，从而更新视图。

实现一个监听器Observer，用来劫持所有属性，如果有变动就通知订阅者Watcher。

实现一个消息订阅器Watcher，用来收到属性的变化通知并执行相应函数从而更新。

实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板以及初始化相应的订阅器。