vue 实现流程

日常看视频教程,记录其中讲到的 vue 实现流程。

1、解析模板成render函数

  • with 的用法
  • 模板中的所有信息都被render函数包含
  • 模板中用到的data中的属性,都变成了JS变量
  • 模板中的v-model v-for v-on 都变成了JS逻辑
  • render函数返回vnode

2、响应式开始监听

  • Object.defineProperty
  • 将data的属性代理到vm上

3、首次渲染,显示页面,且绑定依赖

  • 初次渲染,执行updateComponent,执行vm._render()
  • 执行render函数,会访问到vm.list vm.title
  • 会被响应式的get方法监听到
  • 执行updateComponent,会走到vdom的patch方法
  • patch将vnode渲染成DOM,初次渲染完成

为什么要监听get,不直接监听set?

  • data中的属性有的会被用掉,有的可能不会被用到
  • 只有被用到的才会走到get
  • 避免不必要的重复渲染

4、data属性变化

  • 修改属性,被响应式的set监听到
  • set中执行updateComponent
  • updateComponent重新执行vm._render()
  • 生成的vnode和prevVnode,通过patch进行对比
  • 渲染到html中
0%