# 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 中
← 模板编译