vue原理浅析

大概流程

使用正则等方式解析模板，生成词法树，优化之后生成render函数，然后生成VDom对象，再通过h函数生成真实Dom节点，最后通过patch函数渲染到页面，另一个核心是响应式，使用Object.defineProperty，在模板解析的时候使用其getter方法进行依赖收集，将相应观察者存放到订阅者，在属性变化后，触发setter方法通知订阅了该属性的每一个观察者更新视图，生成新的VDom，再次调用patch方法并diff前后VDom的区别，将差异更新到视图上。

关键词解释

编译

• compile编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到渲染 VNode 所需的 render function；
• parse句法分析，parse 会用正则等方式解析 template 模板中的指令、class、style等数据，形成AST（抽象语法树）；
• optimize[ˈɒptɪmʌɪz] 优化，optimize 的主要作用是标记 static 静态节点， diff 算法会直接跳过静态节点；
• generate生成，generate 是将 AST 转化成 render function 字符串的过程；

响应式

• Vue2.x使用 Object.defineProperty缺陷，
  • 检测不到对象属性的添加和删除；
  • 重写了数组的多种原生方法式实现监听，但无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应；
  • 当data中数据比较多且层级很深的时候，会有性能问题，因为要遍历data中所有的数据并给 其设置成响应式的；
• Vue3.0使用ES6 原生提供 Proxy 构造函数，
  • Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）；
  • Proxy 是对对象的操作，只要你访问对象，就会走到 Proxy 的逻辑中；
  • Proxy只会代理对象的第一层，需要判断是否为Object，递归监听；

VDOM

• Virtual DOM 其实就是一棵以 JavaScript 对象（VNode 节点）作为基础的树，用对象属性来描述节点，使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等；

流程图

参考

• 掘金小册-剖析 Vue.js 内部运行机制
• 简单通俗的理解Vue3.0中的Proxy