浅记vue运行过程

2018-11-21

阅读了掘金小册《剖析vuejs内部运行机制》感觉对vue 的运行流程有了一个认识,之后再去阅读vue源码应该会有帮助,对vue的运行流程记录一下。

vue运行机制.jpg | center | 826x574

  1. 实例化Vue之后会调用init函数,负责初始化生命周期、事件、propsmethodsdatgacomputedwatch
  2. 通过object.defineProperty设置settergetter实现响应式与依赖收集。
  3. 接下来进行编译首先是parse利用正则将template模板当中的指令、classstyle等数据解析成AST(抽象语法树)
  4. 其次optimize时标记静态节点,主要是为了让后面diff算法进行对比时跳过该节点。
  5. generate将抽象语法树转化成render function字符串,转化成VNode(虚拟DOM)
  6. 每一个组件实例都有一个watcher实例对象,组件渲染时,会将属性记录为依赖,当依赖项的setter调用时,通知watcher计算,更新组件(update),即setter -> Watcher -> update
  7. 当数据变化时,执行render function就会得到一个新的VNode节点,此时就会进入patch去进行新旧节点的比较(diff算法)从而计算出他们的差异,只需要修改这些有差异的地方。