框架-Vue

Vue
1.熟练使用Vue的API、生命周期、钩子函数

2.MVVM框架设计理念

• 视图
• 数据模型
• 数据双向绑定

3.Vue双向绑定实现原理、Diff算法的内部实现

• View(dom) ? ViewModel ? Model(javascript)
• Model通过vm数据绑定(Date Binding)来更新View代码(updateView)
• M ? V
• Model的动态变化 通过vm 动态更新到View。
  （1.VM实现了一个数据监听器(Observe)进行数据劫持，当数据改变的时候通知订阅者(Watcher)[“diff算法在watcher的update方法里面。”]，Watcher接收到需要更新的数据，更新View(视图)。
  （2.实现了一个Compile(解析指令)，将模版中的变量替换成数据{{****}}，并绑定更新函数，添加数据订阅者(Watcher)。一旦数据变动，接收通知改变视图。

4.Vue的事件机制

5.从template转换成真实DOM的实现机制

baseCompile首先会将模板template进行parse得到一个AST语法树，再通过optimize做一些优化，最后通过generate得到render以及staticRenderFns。

• parse解析得到ast树
• 将AST树进行优化
• 优化的目标：生成模板AST树，检测不需要进行DOM改变的静态子树。
• 一旦检测到这些静态树，我们就能做以下这些事情：
  (1.把它们变成常数，这样我们就再也不需要每次重新渲染时创建新的节点了。
  (2.在patch的过程中直接跳过。

optimize

• optimize的主要作用是标记static静态节点，这是Vue在编译过程中的一处优化，后面当update更新界面时，会有一个patch的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能。

generate

• generate是将AST语法树转化成render funtion字符串的过程，得到结果是render的字符串以及staticRenderFns字符串。