Vuejs设计与实现4-渲染器设计

四、渲染器设计

渲染器+响应系统

最简渲染函数

使用以下函数渲染静态字符串或者动态拼接内容

// 渲染函数
function renderer(domString, container) {
   
   
  container.innerHTML = domString;
}

// 渲染dom
renderer("<p>123</p>", document.getElementById("main"));

vuereactivity

@vue/reactivity 包包含了副作用函数 effect 以及响应式 ref

渲染器基本原理

渲染器 renderer，渲染 render

虚拟节点（vnode） === 虚拟 DOM（vdom）

渲染器把虚拟 DOM 节点渲染为真实 DOM 节点的过程叫作挂载（mount）

第一次渲染称为挂载
后续渲染称为打补丁（patch），也即更新 dom

DIY 渲染器

createRenderer 函数

这是一个构建渲染器的函数，特别留意其中的打补丁 patch 函数的编写！

patch 的三个参数分别指：旧 vnode，新 vnode，挂载位置