Vue内部运行机制剖析--思维导图总结

总结的Vue机制内部运行概览思维导图:

VUE机制内部运行概览思维导图文字版本：

初始化以及挂载
  来自于：new Vue()之后
  调用分方法：_init
    初始化生命周期、事件、 props、 methods、 data、 computed 与 watch
  之后：  $mount 会挂载组件
    编译template
编译
  parse
    会用正则等方式解析 template 模板中的指令、class、style 等数据；形成 AST（抽象语法树（abstract syntax tree或者缩写为AST））
  optimize
    optimize 的主要作用是标记 static 静态节点，这是 Vue 在编译过程中的一处优化，后面当 update 更新界面时，会有一个 patch 的过程
     diff 算法会直接跳过静态节点，从而减少了比较的过程，优化了patch 的性能。
  generate
    将 AST 转化成 render function 字符串的过程，得到结果是 render 的字符串以及 staticRenderFns 字符串。
响应式
  getter
    被render function主动触发进行依赖收集所需要的对象的值
  setter
    修改对象的值之后触发，通知DEP下面的watcher 告知值的修改
  watcher
    受到setter的调用之后，会调用update来更新视图
虚拟DOM
  render function 会被转化成 VNode 节点
    Virtual DOM 其实就是一棵以 JavaScript 对 象( VNode 节点)作为基础的树&#