关于 Vue 编译原理这块的整体逻辑主要分三个部分，也可以说是分三步，这三个部分是有前后关系的：
第一步是将 模板字符串 转换成 element ASTs（解析器）
第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）
第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）
模板编译
上面提到了挂载的$mount函数，此函数的实现与运行环境有关，在此只看web中的实现。该方法在src/platforms/web/runtime/index.js中定义，挂载在vue的原型上。实现只有简单的两行，判断运行环境为浏览器，调用工具方法查找到el对应的DOM节点，再调用位于src/core/instance/lifecycle.js下的mountComponent方法来实现挂载，这里就涉及到了挂载之前的处理问题。对于拥有render(JSX)函数的情况，组件可以直接挂载，如果使用的是template，需要从中提取AST渲染方法（注意如果使用构建工具，最终会为我们编译成render(JSX)形式，所以无需担心性能问题），AST即抽象语法树，它是对真实DOM结构的映射，可执行，可编译，能够把每个节点部分都编译成vnode，组成一个有对应层次结构的vnode对象。有了渲染方法，下一步就是更新DOM，注意并不是直接更新，而是通过vnode，于是涉及到了一个非常重要的概念。
虚拟DOM
虚拟DOM技术是一个很流行的东西，现代前端开发框架vue和react都是基于虚拟DOM来实现的。虚拟DOM技术是为了解决一个很重要的问题：浏览器进行DOM操作会带来较大的开销。
操作DOM是不可避免的，常规的操作也不会有任何问题，但是经验不足的开发者往往很容易写出大量的多余或重复的DOM操作，成为前端性能优化中重要的问题。想提升效率，我们就要尽可能减少DOM操作，只修改需要修改的地方。要知道js本身运行速度是很快的，而js对象又可以很准确地描述出类似DOM的树形结构，基于这一前提，人们研究出一种方式，通过使用js描述出一个假的DOM结构，每次数据变化时候，在假的DOM上分析数据变化前后结构差别，找出这个最小差别并且在真实DOM上只更新这个最小的变化内容，这样就极大程度上降低了对DOM的操作带来的性能开销。
上面的假的DOM结构就是虚拟DOM，比对的算法成为diff算法，这是实现虚拟DOM技术的关键，在vue初始化时，首先用JS对象描述出DOM树的结构，用这个描述树去构建真实DOM，并实际展现到页面中，一旦有数据状态变更，需要重新构建一个新的JS的DOM树，对比两棵树差别，找出最小更新内容，并将最小差异内容更新到真实DOM上。
有了虚拟DOM，下面一个问题就是，什么时候会触发更新，接下来要介绍的，就是vue中最具特色的功能--数据响应系统及实现。
**数据绑定 **
记得vue.js的作者尤雨溪老师在知乎上一个回答中提到过自己创作vue的过程，最初就是尝试实现一个类似angular1的东西，发现里面对于数据处理非常不优雅，于是创造性的尝试利用ES5中的Object.defineProperty来实现数据绑定，于是就有了最初的vue。vue中响应式的数据处理方式是一项很有价值的东西。
vue会遍历此data中对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter，而每个组件实例都有watcher对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。这就是响应实现的基本原理，Object.defineProperty无法shim，所以vue不支持IE8及以下不支持ES5的浏览器。
1.vue2 vue3 react diff算法区别
react-diff: 递增法
移动节点：移动的节点称为α，将α对应的真实的DOM节点移动到，α在新列表中的前一个VNode对应的真实DOM的后面react
添加节点：在新列表中有全新的VNode节点，在旧列表中找不到的节点须要添加（经过find这个布尔值来查找）面试
移除节点：当旧的节点不在新列表中时，咱们就将其对应的DOM节点移除（经过key来查找肯定是否删除）算法
不足：从头至尾单边比较，容易增长比较次数数组
vue2-diff: 双端比较
DOM节点何时须要移动和如何移动，总结以下：markdown
头-头：不移动
尾-尾：不移动
头-尾: 插入到旧节点的尾节点的后面
尾-头：插入到旧列表的第一个节点以前
以上4种都不存在（特殊状况）：在旧节点中找，若是找到，移动找到的节点，移动到开头；没找到，直接建立一个新的节点放到最前面
添加节点【oldEndIndex以及小于了oldStartIndex】：将剩余的节点依次插入到oldStartNode的DOM以前post
移除节点【newEndIndex小于newStartIndex】：将旧列表剩余的节点删除便可学习
vue3-diff： 最长递增子序列
区别优化
react和vue2的比较：
vue2双端比较解决react单端比较致使移动次数变多的问题，react只能从头至尾遍历，增长了移动次数
vue2和vue3的比较：都用了双端指针
vue3和react比较：vue3在判断是否须要移动，使用了react的递增法
几个算法看下来，套路就是找到移动的节点，而后给他移动到正确的位置。把该加的新节点添加好，把该删的旧节点删了，整个算法就结束了。
2.keep-alive
在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode实例进行渲染。
4.参数（Props）
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例
5.对生命周期的变化
1.activated
在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用
2.deactivated
在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。
3.nextTick
作用：
nextTick用于下次Dom更新循环结束之后执行延迟回调，在修改数据之后使用nextTick用于下次Dom更新循环结束之后执行延迟回调，在修改数据之后使用nextTick用于下次Dom更新循环结束之后执行延迟回调，在修改数据之后使用nextTick,则可以在回调中获取更新后的DOM。
应用场景：
需要在视图更新之后，基于新的视图进行操作。
实现原理：
nextTick方法主要是使用了宏任务和微任务，定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空队列。
2. computed 的实现原理 computed 本质是一个惰性求值的观察者。
computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。
其内部通过 this.dirty 属性标记计算属性是否需要重新求值。
当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher,
computed watcher 通过 this.dep.subs.length 判断有没有订阅者,
有的话,会重新计算,然后对比新旧值,如果变化了,会重新渲染。 (Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)
没有的话,仅仅把 this.dirty = true。 (当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）特性。)
- computed 和 watch 有什么区别及运用场景? 区别 computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
watch 侦听器 : 更多的是「观察」的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。
运用场景
当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算。
当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
4. 为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty？ Object.defineProperty 本身有一定的监控到数组下标变化的能力,但是在 Vue 中,从性能/体验的性价比考虑,尤大大就弃用了这个特性(Vue 为什么不能检测数组变动 )。为了解决这个问题,经过 vue 内部处理后可以使用以下几种方法来监听数组
push(); pop(); shift(); unshift(); splice(); sort(); reverse(); 复制代码 由于只针对了以上 7 种方法进行了 hack 处理,所以其他数组的属性也是检测不到的,还是具有一定的局限性。
Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x 里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。
Proxy 可以劫持整个对象,并返回一个新的对象。Proxy 不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。
聊聊 keep-alive 的实现原理和缓存策略 原理 获取 keep-alive 包裹着的第一个子组件对象及其组件名
根据设定的 include/exclude（如果有）进行条件匹配,决定是否缓存。不匹配,直接返回组件实例
根据组件 ID 和 tag 生成缓存 Key,并在缓存对象中查找是否已缓存过该组件实例。如果存在,直接取出缓存值并更新该 key 在 this.keys 中的位置(更新 key 的位置是实现 LRU 置换策略的关键)
在 this.cache 对象中存储该组件实例并保存 key 值,之后检查缓存的实例数量是否超过 max 的设置值,超过则根据 LRU 置换策略删除最近最久未使用的实例（即是下标为 0 的那个 key）
最后组件实例的 keepAlive 属性设置为 true,这个在渲染和执行被包裹组件的钩子函数会用到,这里不细说
new Vue干了什么
初始化：执行init操作。包括且不限制initLifecycle、initState等
挂载：执行mount。进行元素挂载
编译：compiler步骤对template属性进行编译，通过vue-loader处理生成render函数
渲染：执行render。生成vnode
补丁：patch。新旧vnode经过diff后，渲染到真实dom上 源码路径 zhuanlan.zhihu.com/p/419896443
