总结的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 节点)作为基础的树&#