vnode、render 和虚拟 DOM 的关系

1. render 函数：
   • 用户可操作的函数：render 函数是用户定义的，用来决定返回虚拟节点（vnode）的内容。
   • 返回虚拟节点（vnode）：当 render 函数执行时，它会返回一个虚拟节点（vnode），这个 vnode 是对真实 DOM 的抽象描述。通过 vnode，Vue 确定如何渲染和更新组件的视图。
   • 模板编译为 render 函数：在 Vue 中，模板会被编译成 render 函数。模板就是 render 函数的语法糖，最终都会通过 render 函数生成虚拟节点。
2. vnode（虚拟节点）：
   • 虚拟 DOM 的核心：vnode 是对真实 DOM 元素的抽象表示，包含标签、属性、子节点等信息。
   • 由 render 生成：每次执行 render 函数时，都会返回一个新的 vnode。
   • 描述组件或元素：虚拟节点不仅可以表示 HTML 元素，也可以表示组件。vnode 的 type 属性指向组件的构造函数或描述对象。
3. 虚拟 DOM 的更新：
   • 差异比较（diff）：当数据变化时，render 函数会被重新执行，返回新的 vnode。Vue 会将新的 vnode 与上一个 vnode 进行对比，计算出最小的差异。
   • 更新真实 DOM：根据差异，Vue 更新真实 DOM，确保界面只进行最小的变动，从而提高性能。
4. 渲染过程：
   • 组件的渲染过程是：
     1. render 函数执行，生成 vnode。
     2. vnode 被用于描述 UI，虚拟 DOM 与真实 DOM 比较。
     3. 最小差异被应用到真实 DOM 上，从而更新界面。
5. 顺序：
   • 先有 render 函数，它描述了组件如何渲染，并生成虚拟节点（vnode）。
   • 再有 vnode，它是由 render 函数返回的，表示渲染结果。