《Vuejs设计与实现》7.3 自定义渲染器

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

前文有说过，渲染器不但可以渲染web平台的dom，我们还可以渲染其他平台的元素或者view，比如iOS,在vue2时代，我们有weex，但后来被证实这是一个KPI项目，目前基本已经没人在用了吧。

所以，在vue3中，我觉得尤老板是反思过了的，作为一个开源项目，vue团队似乎没有精力去做跨端了，如果这时候再维护一个跨端的产品，势必事半功倍，反而拖累了vue3的代码质量。

那就把渲染器弄得更灵活，规范vue3渲染的底层的接口，并开放出来，这样就可以让任何人，任何团队去实现自己的跨端框架，至于你要怎么实现这些接口，怎么样去工程化，怎么样去打包成跨端的产物，那就是你自己的事情了。

于是有了这个自定义的渲染器。其实我一直有个想法，如果把vue3的自定义渲染器与flutter的Skia引擎结合起来会怎么样。

我们用代码简单实现一下这个自定义渲染器。

• 首先，我们定义一个一看就能懂的vnode

const vnode = {
    type:'p',
    children:'123'
}

• 创建一个渲染器

这里，我们给这个渲染器传入一个形参options，但是先不用这个参数，我们看一下这个代码

首先，如果给render函数传入一个vnode,此时由于是第一次调用render,然后就会调用patch,这时候就会报一个很明显的错误，reference error: createElement is undefined,这是因为代码里并没有写createElement,那么这个方法应该从哪里来呢？

答案就是从options中来，从外部传进来。

const webOptions = {
    createElement(tag){
        return document.createElement(tag)
    },
    setText(){/*省略*/}
    append(){/*省略*/}
}
const {render} = createRenderer(webOptions)

这样，我们就实现了一个自定义的渲染器，你也许会叫这个是依赖注入，但其实，它只是抽象了渲染函数中的接口，然后让你自定义，这样来实现跨端。

用浏览器的API实现的webOptions,渲染出来就是真实DOM，如果你再实现一套iOSOptions，那么就应该渲染出来iOS的原生元素。

我觉得这样，比你维护一套weex更好，因为我们可以按照自己的意愿，实现N种weex like