大概流程
使用正则等方式解析模板，生成词法树，优化之后生成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
网友评论