Vnode 是 Vue 内部的核心数据结构，用来描述 DOM 及 Component 和其对应的各种状态，例如：

1
2
3
4
5
6
7
8
9
10

const elementVNode = {
  tag: 'div',
  data: {
    style: {
      width: '100px',
      height: '100px',
      backgroundColor: 'red'
    }
  }
}

Vnode 的创建

大致执行过程

依赖收集

1. 在 initState 时，调用 initProps，initData 等 init 方法，通过 Observer 添加 getter 和 setter。
2. Observer 中调用 defineReactive 完成响应式对象初始化。
3. 在 DefineReactive 中设置 getter，并在 getter 中通过 dep.depend() 收集依赖。

建立观察者

1. mountComponent 时会建立一个 watcher。
2. 创建 watcher 时触发 updateComponent，从而触发组件依赖元素的 getter。
3. 触发各个元素 getter 中的依赖收集。Dep.target 设置为当前 watcher。
4. Dep.target.addDep 会将各个元素依赖添加到当前 watcher。
5. Dep.target.addDep 调用时也会调用 dep.addSub 将 watcher 添加到 dep 的观察者列表中。

更新

1. 当修改值时会触发元素的 setter。
2. 通过 dep.notify() 通知 watcher。
3. 在 watcher 的 update 中执行更新方法。