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

用 响应系统 驱动 渲染器：数据一变，副作用函数重新执行，页面自动重新渲染。

一、渲染器是什么

渲染器（renderer）的作用是执行渲染任务：

  • 在浏览器平台上，用它把内容渲染为真实 DOM 元素；
  • 渲染器不只是「渲染 DOM」，它还是框架跨平台能力的关键，所以设计时必须考虑好可自定义的能力；
  • 本章先把它限定在 DOM 平台，跨平台放到 7.3 讨论。

注意区分 renderer（名词，渲染器）和 render（动词，渲染）。

二、渲染器与响应系统的关系

  • 响应系统负责发现数据变化，渲染器负责把数据变成页面；
  • 二者结合：利用响应系统的能力，自动调用渲染器完成页面的渲染和更新，这就是 Vue 自动更新页面的原理。

渲染器本身很简单，严格来说下面这个函数就是一个合格的渲染器：

function renderer(domString, container) {
  container.innerHTML = domString
}

三、结合响应系统：最小可用示例

// 通过 VueReactivity 得到 effect 与 ref（@vue/reactivity 暴露的全局 API 名为 VueReactivity）
const { effect, ref } = VueReactivity

const count = ref(1)

effect(() => {
  renderer(`<div>${count.value}</div>`, document.getElementById('app'))
})

setTimeout(() => {
  count.value = 2 // 触发副作用函数重新执行 → 页面自动更新
}, 2000)

执行流程：

  1. effect 首次执行，读取 count.value（依赖收集），渲染器把内容写入容器；
  2. count.value 被修改，触发该副作用函数重新执行（依赖触发）；
  3. 渲染器再次执行 container.innerHTML = ...，页面被更新。
  • 整个过程不需要手写任何 DOM 更新代码，数据变化自动映射为视图变化。
  • 引入方式：@vue/reactivity 提供 IIFE 模块格式，可直接用 <script> 标签引入页面。
  • @vue/reactivity 可以独立于 Vue 使用，其实现原理见「响应系统」相关章节。

易错点：这里的渲染器直接用 innerHTML 整段重建 DOM，无法复用已有元素（后续章节会用虚拟 DOM + 打补丁替代这种粗暴做法）。

相关

最近更新:
Contributors: liujw