vuejs设计与实现-渲染器的设计

渲染器与响应系统的结合

渲染器用来执行渲染任务, 是跨平台能力的关键. 在浏览器平台, 可以渲染真实的dom元素.

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

const count = ref(1)
effect(() => {
    renderer(`<h1>${ count.value }</h1>`, document.getElementById('app'))
})
// 利用响应系统的能力, 自动调用渲染器完成页面的渲染与更新. 
count.value++

副作用函数内调用渲染函数, 响应式数据count和副作用函数建立联系. 当count.value变化时, 副作用函数重新执行完成重新渲染.

渲染器的基本概念

renderer渲染器不仅包含render函数, 还包含hydrate(服务端渲染章节介绍)函数、createApp函数等. 渲染器把虚拟dom节点渲染为真实dom节点的过程叫做挂载(mount). patch打补丁(更新), 比较新旧节点, 找出不同并更新. 挂载(旧节点不存在)可以看作特殊的打补丁.

自定义渲染器

通过抽象手段, 让核心代码不依赖平台特有的API, 再通过支持个性化配置的能力实现跨平台.

// 将浏览器平台对应的方法作为参数传递
function createRenderer(options){
    const {
        createElement,
        insert, 
        setElementText
    } =  options
    function mountElement(){ ... }
    function path(){ ... }
    function render(){ ... }
    return {
        render, 
        // ...
    }
}

总结

• 响应式数据变化时(副作用函数重新执行), 自动完成页面更新(或重新渲染).
• 渲染器renderer, 把虚拟dom(virtual dom)渲染为特定平台的真实元素.
• 自定义渲染器: createRenderer函数创建渲染器时指定自定义的配置对象, 从而实现自定义行为.