1. 什么是 MVVM？

Model–View–ViewModel （MVVM） 是一个软件架构设计模式，是一种简化用户界面的事件驱动编程方式。
MVVM 源自于经典的 Model–View–Controller（MVC）模式 ，MVVM 的出现促进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率，MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：
[] vue实现原理 - 图1
（1）View 层
View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建 。
（2）Model 层
Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。
（3）ViewModel 层
ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。

MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展现在 View 层，前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新。这样 View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。一下是MVVM 的具体实现：

  1. // View 层
  2. <div id="app">
  3.     <p>{{message}}</p>
  4.     <button v-on:click="showMessage()">Click me</button>
  5. </div>
  6. // ViewModel 层
  7. var app = new Vue({
  8.     el: '#app',
  9.     data: {  // 用于描述视图状态   
  10.         message: 'Hello Vue!', 
  11.     },
  12.     methods: {  // 用于描述视图行为  
  13.         showMessage(){
  14.             let vm = this;
  15.             alert(vm.message);
  16.         }
  17.     },
  18.     created(){
  19.         let vm = this;
  20.         ajax({ // Ajax 获取 Model 层的数据
  21.             url: '/your/server/data/api',
  22.             success(res){
  23.                 vm.message = res;
  24.             }
  25.         });
  26.     }
  27. })
  28. // Model 层
  29. {
  30.     "url": "/your/server/data/api",
  31.     "res": {
  32.         "success": true,
  33.         "name": "IoveC",
  34.         "domain": "www.cnblogs.com"
  35.     }
  36. }

2、虚拟 DOM 的优缺点？

优点：

  • 保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
  • 无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
  • 跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点:

  • 无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

    3、虚拟 DOM 实现原理？

    虚拟 DOM 的实现原理主要包括以下 3 部分：

  • 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；

  • diff 算法 — 比较两棵虚拟 DOM 树的差异；

  • pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

    4、Proxy 与 Object.defineProperty 优劣对比

    Proxy 的优势如下:

  • Proxy 可以直接监听对象而非属性；

  • Proxy 可以直接监听数组的变化；
  • Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
  • Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
  • Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

  • 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

    5、Vue 是如何实现数据双向绑定的？

    Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据，如下图所示：
    [] vue实现原理 - 图2

  • 输入框内容变化时(通过事件监听)，Data 中的数据同步变化。即 View => Data 的变化。

  • Data 中的数据变化时，文本节点的内容同步变化。即 Data => View 的变化。

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：
实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。
实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。
[] vue实现原理 - 图3

6、Vue 框架怎么实现对象和数组的监听？

如果被问到 Vue 怎么实现数据双向绑定，大家肯定都会回答 通过 Object.defineProperty() 对数据进行劫持，但是 Object.defineProperty() 只能对属性进行数据劫持，不能对整个对象进行劫持，同理无法对数组进行劫持，但是我们在使用 Vue 框架中都知道，Vue 能检测到对象和数组（部分方法的操作）的变化，那它是怎么实现的呢？我们查看相关代码如下：

  1. //  Observe a list of Array items.
  2.   observeArray (items: Array<any>) {
  3.     for (let i = 0, l = items.length; i < l; i++) {
  4.       observe(items[i])  // observe 功能为监测数据的变化
  5.     }
  6.   }
  7. // 对属性进行递归遍历
  8.   let childOb = !shallow && observe(val) // observe 功能为监测数据的变化

通过以上 Vue 源码部分查看，我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。

7、Vue 中的 key 有什么作用？

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。Vue 的 diff 过程可以概括为：oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它们会新节点和旧节点会进行两两对比，即一共有4种比较方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex，如果以上 4 种比较都没匹配，如果设置了key，就会用 key 再进行比较，在比较的过程中，遍历会往中间靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较。所以 Vue 中 key 的作用是：key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。
更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。
更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快，源码如下：

  1. function createKeyToOldIdx (children, beginIdx, endIdx) {
  2.   let i, key
  3.   const map = {}
  4.   for (i = beginIdx; i <= endIdx; ++i) {
  5.     key = children[i].key
  6.     if (isDef(key)) map[key] = i
  7.   }
  8.   return map
  9. }

8、Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？

受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？

  1. export function set (target: Array<any> | Object, key: any, val: any): any {
  2.   if (Array.isArray(target) && isValidArrayIndex(key)) { // target 为数组  
  3.     // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
  4.     target.length = Math.max(target.length, key)
  5.     target.splice(key, 1, val) // 利用数组的splice变异方法触发响应式
  6.     return val
  7.   }
  8.   if (key in target && !(key in Object.prototype)) { // key 已经存在，直接修改属性值
  9.     target[key] = val
  10.     return val
  11.   }
  12.   const ob = (target: any).__ob__
  13.   if (!ob) { // target 本身就不是响应式数据, 直接赋值
  14.     target[key] = val
  15.     return val
  16.   }
  17.   // 对属性进行响应式处理
  18.   defineReactive(ob.value, key, val)
  19.   ob.dep.notify()
  20.   return val
  21. }

我们阅读以上源码可知，vm.$set 的实现原理是：

  • 如果目标是数组，直接使用数组的 splice 方法触发相应式；
  • 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

nextick原理？

参考：https://developer.aliyun.com/article/715035