老师我大概总结了一下第二章的内容,想麻烦下您看看大致对不对

来源:2-8 update

小学生6年级

2020-03-08

对于 runtime+compile 版本:

  1. 初始化一个 vue 实例的一系列相关环境(watcher,lifecycle, methods等等),
  2. compile:将 template (若有)转化成 render
  3. 给实例注册一个渲染 Watcher,渲染 watcher 拥有一个回调,该回调函数会在初始化和每次 vm 实例更新时触发,其中初始化的时候包含下面两步骤:
  4. 利用 render 函数生成 vnode。 从根 vnode开始创建(处理边界条件包括 textVnode,emptyVnode 等等),摊平所有 children vnode 成一维,最终创建成一个 vnode tree。
  5. 开始执行 patch 过程,从根 vnode 起开始创建真实 DOM,递归一整个 vnode tree,递归到最底层的时候开始将 vnode->el 插入到 parent vnode->el。 也就是当每一个真实 DOM 插入到父亲 DOM 节点的时候,当前这个 DOM 节点会是一个构建好的 DOM tree。
写回答

1回答

ustbhuangyi

2020-03-09

理解基本正确,几个细节地方我提一下,在 render 过程中每一个模板节点都会生成对应的 _c,也就是执行 createElement 函数,children 拍平成一维数组就是为了建立好 tree 的数据结构,因为对于 tree 来说,每个节点的 children 就是一维数组。另外 patch 的递归过程是一个自上而下的过程,但是插入到 DOM 节点的顺序是自下而上,也就是子节点先插入,父节点后插入。

1
2
ustbhuangyi
回复
小学生6年级
嗯,是的没错
2020-03-09
共2条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程