# vue的整个实现流程简易说明

  • 第一步:解析模板成 render 函数
  • 第二步:响应式开始监听
  • 第三步:首次渲染,显示页面,且绑定依赖
  • 第四步:data 属性变化,触发 rerender

# 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 函数,会访问到 data 下的数据
  • 会被响应式的 get 方法监听到
  • 执行 updateComponent,会走到 vdom 的 patch 方法
  • patch 将 vnode 渲染成 DOM,初次渲染完成

# 4. data 属性变化,触发 rerender

  • 修改属性,被响应式的 set 监听到
  • set 中执行 updateComponent
  • updateComponent 重新执行 vm._render()
  • 生成的 vnode 和 prevVnode ,通过 patch 进行对比
  • 渲染到 html 中
上次更新: 2021年10月30日星期六晚上8点03分