vue2初始化到更新完过程
- 执行_init方法
- 初始化生命周期
- 初始化事件监听
- 初始化$slot,render等方法
- 执行beforeCreated方法
- 初始化inject数据,添加响应式
- 初始化state数据,props-methods-data-computed-watch,并添加响应式
- 初始化provide数据,添加响应式
- 执行created方法
- 判断参数中是否含有挂载节点,有执行$mount方法。
- 执行beforeMounted方法
- 生成updateComponent方法,里面包含vm_update(vm_update)方法
- 实例化watcher方法,并会执行一次updateComponent,将当前Deps对象的target设置为当前watcher
- 执行vm._render,将模板生成为Vnode,并将其传入update方法。如果用到了做了数据劫持的get,会将watcher加入到这个属性的deps依赖里。
- 触发update方法里的patch方法,因为是首次渲染,不用比较,直接执行createElement方法。
- 遍历节点树,如果是子组件,则进一补执行其init方法,做之前的流程
- 如果是dom节点,直接根据节点类型生成dom,insert到父元素上。
- 深度遍历完,将根节点插入到传入的挂载节点上。
- 执行mounted方法。
- 响应式数据修改,触发set里deps的notice方法,通知watcher,执行updateComponent方法
- 内部判断已经执行了mounted,则去执行beforeUpdate方法
- 继续执行render方法,生成Vnode,传入update方法,执行patch方法
- 使用sameNode方法判断是否为同一节点
- 是继续执行patchNode方法比较
- 执行内部的prepatch钩子
- 判断是否为文本节点,是做文本比较,增删改等
- 不是,则判断新旧节点是否都有子节点,有,触发updatechidlren做双端比较执行diff算法
- 不一的化就做子节点的增删
- 都没子节点,则旧节点是文本节点,设置为空文本。
- 执行postPatch钩子
- 根据生成更新JSON信息,根据类型做不同的dom操作,最后插入到父节点中
- 触发update方法
JStar