《Vue.js设计与实现》 第七章 渲染器的设计

7.1 渲染器与响应系统的结合

最简单的渲染器及其使用

// 渲染器
function renderer(domString, container) {
  container.innerHTML = domString
}

// 使用
let count = 1
renderer(`<h1>${count}</h1>`, document.getElementById('app'))

渲染器与响应式系统结合

const count = ref(1)
effect(() => {
  renderer(`<h1>${count.value}</h1>`, document.getElementById('app'))
})
count.value++

7.2 渲染器的基本概念

renderer 来表达“渲染器”
render 来表达“渲染”
mount（挂载）：渲染器把虚拟 DOM 节点渲染为真实 DOM 节点的过程。

7.3 自定义渲染器