前端面试Vue 高频原理篇+详细解答，还有105道vue面试题集合

MVC模式

单向的数据，用户的每一步操作都需要重新请求数据库来修改视图层的渲染，形成一个单向的闭环。比如 jQuery+underscore+backbone。

• M：model 数据存放层

• V: view：视图层 页面

• C: controller：控制器 js 逻辑层。

controller 控制层将数据层 model层 的数据处理后显示在视图层 view层，同样视图层 view层 接收用户的指令也可以通过控制层 controller，作用到数据层 model。所以 MVC的缺点是视图层不能和数据层直接交互。

MVVM模式

隐藏了 controller 控制层，直接操控 View 视图层和 Model 数据层。

• M：model 数据模型

• V: view 视图模板

• VM：view-model 视图数据模板(vue处理的层，vue 中的definedProperty 就是处理 VM 层的逻辑)

双向的数据绑定：model 数据模型层通过数据绑定 Data Bindings 直接影响视图层 View，同时视图层 view 通过监听 Dom Listener 也可以改变数据模型层 model。

• 数据绑定和DOM事件监听就是 viewModel 层 Vue 主要做的事。也就是说：只要将 数据模型层Model 的数据挂载到 ViewModel 层 Vue 就可以实现双向的数据绑定。

• 加上 vuex/redux 可以作为 vue和react 的 model 数据层。

var vm = new Vue()

复制代码

vm 就是 view-model 数据模型层，data：就是vm view-model 层所代理的数据。

• 综上两者的区别：MVC 的视图层和数据层交互需要通过控制层 controller 属于单向链接。MVVM 隐藏了控制层 controller，让视图层和数据层可以直接交互 属于双向连接。

3. 说一下对 Vue 中响应式数据的理解

---

小tip：响应式数据指的是数据发生了变化，视图可以更新就是响应式的数据

• vue 中实现了一个 definedReactive 方法，方法内部借用 Object.definedProperty() 给每一个属性都添加了 get/set 的属性。

• definedReactive 只能监控到最外层的对象，对于内层的对象需要递归劫持数据。

• 数组则是重写的7个 push pop shift unshift reverse sort splice 来给数组做数据拦截，因为这几个方法会改变原数组

• 扩展：

// src\core\ob