初始化
执行new Vue()之后，vue会初始化生命周期、事件、props、methods、data、computed、watch等。最重要的是通过Object.defineProperty设置setter和getter，用来实现响应式和依赖收集。
编译
初始化后调用$mount挂载组件，并启动编译器compile()对模板进行编译。分三个阶段：
- parse：使用正则解析
template中的指令、变量等，生成抽象语法树AST。 - optimize：标记一些静态节点，用作后面的性能优化，在diff的时候直接略过。
- generate：把第一步生成的AST转换成渲染函数
render()。
响应式
初始化时通过Object.defineProperty绑定setter和getter，设置通知的机制，当编译生成的渲染函数被实际渲染的时候，会触发getter进行依赖收集，在数据变化的时候，会触发setter进行更新。
虚拟DOM
使用js对象来描述DOM结构，数据修改的时候，修改虚拟DOM中的数据，然后做diff，进行最小代价的更新真实DOM。
更新视图
数据的修改触发setter，监听器会通知进行修改，通过对比新旧DOM树，获取需要改变的地方，进行patch。
网友评论