1. 初始化
在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化
初始化过程:
①初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等
②通过 Object.defineProperty 设置 setter 与 getter 函数,用来实现「响应式」以及「依赖收集」

2.挂载组件
调用$mount挂载组件

3.编译
*(如果是运行时编译,即不存在render function但是存在template的情况,需要进行编译步骤。)
①parse(解析):利用正则将模板转换成抽象语法树(AST);
②optimize(标记静态节点做优化): 标记静态节点,以后update的时候,diff算法可以跳过静态节点
③ generate(转成字符串):将抽象语法树(AST)转成字符串,供render去渲染DOM
经过以上步骤,就可以得到render funciton

4. 响应式
当 render function 被渲染时,会对data对象进行数据读取,所以会触发 getter 函数进行依赖收集,依赖收集的目的是将data里的属性放到观察者(Watcher)的观察队列中
在修改对象的值的时候,会触发对应的 setter, setter 通知观察者数据变化,需要重新渲染视图。观察者调用 update 来更新视图

5.虚拟DOM
render funtion 会被转换成虚拟DOM
虚拟DOM实际上就是一个JS对象,从顶层DOM层层描述DOM,有tag, children, isStatic, isComment等等许多属性来做DOM描述

6. 更新视图
updata时,会将新旧VNode 一起传入 patch,经过 diff 算法得出它们的差异,将差异所对应的 DOM 进行修改

Vue的运行机制

相关文章:

  • 2021-09-15
  • 2021-12-07
  • 2021-06-03
  • 2021-10-13
  • 2021-06-08
  • 2021-11-04
  • 2021-09-20
猜你喜欢
  • 2021-04-14
  • 2021-04-22
  • 2021-08-20
  • 2021-05-23
  • 2021-11-04
  • 2021-11-30
  • 2021-06-26
相关资源
相似解决方案