携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情
从第七章开始，我觉得又进入比较难学的部分了，学习曲线再次陡峭起来。这一章叫渲染器设计，所谓渲染器也就是我们常说的render，它是vue3中很特别庞大的一部分，它的重要性我认为是远超reactive的。
7.1 渲染器与响应系统的结合
渲染器就是执行渲染任务的，我们都知道vue3会把组件编译为虚拟DOM，然后再渲染为真实DOM,实现这一过程的就叫渲染器。同时，我们也可以用它把虚拟DOM渲染为其他系统内的View去显示，从而实现跨端，所以在设计渲染器，一定要保证最大限度的灵活性，才能实现更强的跨端能力。
书中举了这样一个简单的demo
const render = (domStr,container)=>{container.innerHTML = domStr}
render('<p></p>',document.body)
const a = ref(0)
render(`<p>${a}</p>`,document.body)
我们可以看到，这样一个简单的render函数，可以渲染2种基本的格式，固定字符串和动态的字符串。其中动态的字符串就是我们需要研究的重点，也是本章的题目：渲染器与响应系统的结合。
在动态字符串中，我们使用ref,所有，我们需要自动解ref，然后需要当a变化时，自动执行render去更新页面，当然这里面更新其实很复杂，我们需要diffdom树的变化，做到最小更新，当然在这里，我们默认每次都更新整个body。
因此，我们就有这个实现
const a = ref(0)
effect(()=>render(`<p>${a}</p>`,document.body))
a.value++
这样就把渲染前，与响应系统结合起来了，并且实现了解耦。响应系统中，我们无需关注真实dom,虚拟dom,diff算法等等，我们只关注数据。同样，渲染器中也不需要关注什么proxy,什么set,什么get.
我觉得这一小段代码，就能深刻的表现什么叫：数据驱动DOM.因此，在vue中，我们只需要关注数据，而不需要关注DOM如何渲染。再想想前面提到的跨端，如果我们需要把webApp变成iOS App，那么我们应该只需要替换渲染器，或者再把渲染器生成的产物转换为iOS原生组件，这就是我说的灵活性。
